/* ==========================================================================
   Application-specific styling (HIS, Social, ChatGTP, Notebook, Status)
   ========================================================================== */

.panel-inset {
  background: var(--w95-white);
  border-top: 1px solid var(--w95-gray-darker);
  border-left: 1px solid var(--w95-gray-darker);
  border-right: 1px solid var(--w95-white);
  border-bottom: 1px solid var(--w95-white);
  padding: 6px;
  overflow: auto;
}

.win95-window-body h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

/* Keyword highlight (shared by HIS / Social dialogue rendering) */
.keyword-highlight {
  background: #ffe680;
  border-bottom: 1px dashed #a86b00;
  cursor: pointer;
  padding: 0 2px;
  font-weight: bold;
  color: #7a4b00;
}

.keyword-highlight.keyword-collected {
  background: #c8f7c5;
  color: #1a6b1a;
  border-bottom-color: #1a6b1a;
}

/* ---------------------------------------------------------------------- */
/* HIS App                                                                 */
/* ---------------------------------------------------------------------- */
.custom-window-app { height: 100%; overflow: auto; padding: 8px; box-sizing: border-box; background: #c0c0c0; color: #111; font: 13px var(--w95-font); }
.custom-window-canvas { position: relative; min-width: 260px; min-height: 160px; border: 2px inset #eee; box-shadow: 1px 1px #fff; overflow: hidden; }
.custom-window-widget { position: absolute; box-sizing: border-box; padding: 4px; }
.custom-window-app.app-his { padding: 0; overflow: visible; }
.custom-window-app.app-his .custom-window-canvas { min-width: 0; min-height: 0; overflow: visible; }
.custom-window-app.app-his .his-layout { display: flex; gap: 6px; height: 100%; }
.custom-window-app.app-his .custom-window-widget { position: static; box-sizing: border-box; }
.custom-window-app.app-his .custom-window-widget.his-patient-list { display: flex; flex-direction: column; gap: 4px; }
.custom-window-app.app-his .custom-window-widget.his-dialogue,
.custom-window-app.app-his .custom-window-widget.his-diagnosis,
.custom-window-app.app-his .custom-window-widget.his-prescription { padding: 6px; overflow: auto; }
.custom-window-app.app-his .custom-window-widget.his-patient-list { padding: 6px; overflow: auto; }
.custom-window-app.app-his .custom-window-widget.his-diagnosis { flex-shrink: 0; }
.custom-window-app.app-his .his-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.custom-window-app.app-his .his-main > .his-dialogue,
.custom-window-app.app-his .his-main > .his-prescription { flex: 1; min-height: 60px; }
.custom-window-app.app-his .his-diagnosis > select { display: block; width: 100%; margin: 4px 0; }
.custom-window-app.app-his .his-prescription > select { display: block; width: 100%; margin: 4px 0; }
.custom-window-app.app-his .custom-window-widget.his-medical-incidents { padding: 0; }
.custom-window-button { border: 2px outset #eee; background: #d4d0c8; cursor: pointer; }
.custom-window-button:active { border-style: inset; }
.custom-window-input { border: 2px inset #eee; background: #fff; }
.custom-window-check { display: flex; align-items: center; gap: 4px; }
.custom-window-image { display: flex; align-items: center; justify-content: center; background: #ddd; border: 1px solid #888; }
.custom-window-status { min-height: 18px; margin-top: 5px; color: #444; }

.his-layout {
  display: flex;
  gap: 6px;
  height: 100%;
}

.his-patient-list {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.his-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.his-dialogue,
.his-prescription {
  flex: 1;
  min-height: 60px;
}

.diagnosis-form {
  flex-shrink: 0;
}

.diagnosis-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
}

.diagnosis-row label {
  width: 42px;
  flex-shrink: 0;
}

.diagnosis-row select {
  flex: 1;
  min-width: 0;
}

.his-patient-btn {
  text-align: left;
  font-weight: bold;
}

.his-patient-btn.his-patient-submitted {
  font-weight: normal;
}

.his-prescription-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.his-prescription-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.his-prescription-row .his-medicine-category,
.his-prescription-row .his-medicine-select {
  flex: 1;
  min-width: 0;
}

.his-prescription-copy,
.his-prescription-delete {
  flex: 0 0 24px;
  min-width: 24px;
  padding: 1px 4px;
}

.his-prescription-delete:disabled {
  color: var(--w95-gray-dark);
  cursor: default;
  text-shadow: 1px 1px var(--w95-white);
}

.his-activity-note {
  font-size: 11px;
  color: var(--w95-gray-dark);
  margin: 0 0 6px;
}

.his-empty {
  color: var(--w95-gray-dark);
  font-style: italic;
}

.dialogue-line {
  margin: 4px 0;
}

.dialogue-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.dialogue-option-btn {
  text-align: left;
  font-size: 12px;
}

.dialogue-end {
  color: var(--w95-gray-dark);
  font-style: italic;
  margin: 6px 0 0;
}

/* ---------------------------------------------------------------------- */
/* Social App                                                              */
/* ---------------------------------------------------------------------- */
.social-layout {
  display: flex;
  gap: 6px;
  height: 100%;
}

.social-contact-list {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.social-chat {
  flex: 1;
  min-width: 0;
}

.social-contact-btn {
  text-align: left;
}

.chat-bubbles,
.chatgtp-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-bubble {
  max-width: 80%;
  padding: 6px 8px;
  border-radius: 4px;
  background: #e8e8e8;
}

.chat-bubble.bubble-npc {
  align-self: flex-start;
  background: #dfefff;
}

.chat-bubble.bubble-me {
  align-self: flex-end;
  background: #d7ffd7;
}

/* ---------------------------------------------------------------------- */
/* ChatGTP App                                                             */
/* ---------------------------------------------------------------------- */
.app-chatgtp {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.chatgtp-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 6px;
}

.chatgtp-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.chatgtp-keywords {
  flex: 0 0 150px;
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.chatgtp-disease-row {
  display: flex;
  gap: 4px;
}

.chatgtp-disease-row select {
  flex: 1;
  min-width: 0;
}

.chatgtp-medicine-row {
  display: flex;
  gap: 4px;
}

.chatgtp-medicine-row select {
  flex: 1;
  min-width: 0;
}

.chatgtp-notebook-row {
  display: flex;
  gap: 4px;
  min-width: 0;
}

.chatgtp-notebook-category-select {
  flex: 0.7;
  min-width: 0;
}

.chatgtp-notebook-select {
  flex: 1.6;
  min-width: 0;
}

.chatgtp-selected-keywords {
  display: flex;
  gap: 4px;
  align-items: center;
}

.chatgtp-selected-keyword {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatgtp-selected-keyword.selected {
  background: var(--w95-blue);
  color: var(--w95-white);
}

.chatgtp-query-btn {
  align-self: flex-start;
  flex: 0 0 auto;
}


.chatgtp-san-indicator {
  margin-left: auto;
  font-size: 11px;
  color: var(--w95-gray-dark);
  white-space: nowrap;
}

.chatgtp-san-indicator.distressed {
  color: #a86b00;
  font-weight: bold;
}

.chatgtp-san-indicator.offline {
  color: #b00020;
  font-weight: bold;
}


/* ---------------------------------------------------------------------- */
/* NPC state (own SAN, distress/offline) - shared across HIS/Social/     */
/* ChatGTP + StatusApp's NPC tab                                          */
/* ---------------------------------------------------------------------- */
.npc-distress-warning {
  color: #a86b00;
}

.action-budget-hint {
  font-size: 11px;
  color: var(--w95-gray-dark);
}

/* ---------------------------------------------------------------------- */
/* Notebook App                                                            */
/* ---------------------------------------------------------------------- */
.notebook-section ul {
  margin: 0 0 8px;
  padding-left: 0;
  list-style: none;
}

.notebook-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid #eee;
}

.notebook-item-text {
  overflow-wrap: anywhere;
}

.notebook-delete-btn {
  font-size: 11px;
  flex-shrink: 0;
}

.notebook-empty {
  color: var(--w95-gray-dark);
}

/* ---------------------------------------------------------------------- */
/* Status App                                                              */
/* ---------------------------------------------------------------------- */
.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.status-label {
  width: 40px;
}

.status-bar {
  flex: 1;
  height: 14px;
  background: var(--w95-white);
}

.status-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1084d0, #4bc0f0);
}

.status-value {
  width: 30px;
  text-align: right;
}

.app-status {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.status-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.status-tab-btn.active {
  font-weight: bold;
  background: var(--w95-white);
}

.status-tab-panel {
  flex: 1;
  overflow: auto;
}

.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-row {
  border-bottom: 1px solid #eee;
  padding: 6px 0;
}

.item-row-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.item-row-name {
  font-weight: bold;
}

.item-row-count {
  color: var(--w95-gray-dark);
}

.item-row-actions {
  display: flex;
  gap: 6px;
}

.item-row-feedback {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--w95-gray-dark);
}

.item-row-feedback .inspect-text {
  margin: 0 0 3px;
  line-height: 1.5;
}

.item-row-feedback .inspect-check-meta {
  margin: 0;
  font-size: 11px;
  color: #888;
  font-style: italic;
}

.item-image-preview {
  display: block;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  border: 1px solid #ccc;
  background: #f9f9f9;
  margin-top: 4px;
}

.save-load-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}

.save-file-input {
  flex: 1;
}

.save-feedback {
  font-size: 12px;
  color: var(--w95-gray-dark);
}

.action-budget-row {
  font-size: 12px;
  margin: 2px 0;
}

.action-budget-row.over-budget {
  color: #b00020;
  font-weight: bold;
}

.skill-row {
  font-size: 12px;
  margin: 2px 0;
}

.npc-san-bar .status-bar-fill {
  background: linear-gradient(90deg, #6bbf6b, #a8e0a8);
}

.npc-san-bar .status-bar-fill.distressed {
  background: linear-gradient(90deg, #d9a13d, #f0cf8a);
}

.npc-san-bar .status-bar-fill.offline {
  background: linear-gradient(90deg, #b00020, #e06a80);
}

/* ---------------------------------------------------------------------- */
/* Settings App                                                            */
/* ---------------------------------------------------------------------- */
.settings-section {
  margin-bottom: 14px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-volume-slider {
  flex: 1;
}

.settings-volume-value {
  width: 42px;
  text-align: right;
}

.settings-checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Win95-style range slider (BGM volume) */
.settings-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--w95-white);
  border-top: 1px solid var(--w95-gray-darker);
  border-left: 1px solid var(--w95-gray-darker);
  border-right: 1px solid var(--w95-white);
  border-bottom: 1px solid var(--w95-white);
  outline: none;
}

.settings-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 18px;
  background: var(--w95-gray);
  border-top: 1px solid var(--w95-white);
  border-left: 1px solid var(--w95-white);
  border-right: 1px solid var(--w95-gray-darker);
  border-bottom: 1px solid var(--w95-gray-darker);
  box-shadow: inset 1px 1px 0 var(--w95-gray-light),
              inset -1px -1px 0 var(--w95-gray-dark);
  cursor: pointer;
}

.settings-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 18px;
  background: var(--w95-gray);
  border-top: 1px solid var(--w95-white);
  border-left: 1px solid var(--w95-white);
  border-right: 1px solid var(--w95-gray-darker);
  border-bottom: 1px solid var(--w95-gray-darker);
  box-shadow: inset 1px 1px 0 var(--w95-gray-light),
              inset -1px -1px 0 var(--w95-gray-dark);
  cursor: pointer;
  border-radius: 0;
}

/* Win95-style checkbox (square, inset box, drawn tick) */
.settings-checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  background: var(--w95-white);
  border-top: 1px solid var(--w95-gray-darker);
  border-left: 1px solid var(--w95-gray-darker);
  border-right: 1px solid var(--w95-white);
  border-bottom: 1px solid var(--w95-white);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.settings-checkbox-row input[type="checkbox"]:checked::after {
  content: "✔";
  position: absolute;
  top: -3px;
  left: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--w95-black);
}

.settings-section h4 {
  margin: 0 0 6px;
  font-size: 12px;
}

/* ---------------------------------------------------------------------- */
/* Confirm Dialog (Win95 modal, replaces window.confirm)                  */
/* ---------------------------------------------------------------------- */
.app-confirm-dialog {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.confirm-dialog-message {
  margin: 8px 0;
  white-space: pre-line;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.confirm-dialog-actions .win95-btn {
  min-width: 72px;
}


/* ---------------------------------------------------------------------- */
/* Achievement Toast                                                        */
/* ---------------------------------------------------------------------- */
.achievement-toast {
  position: fixed;
  bottom: 48px;   /* sit just above the taskbar */
  right: 16px;
  z-index: 1003;
  background: var(--w95-gray);
  border-top: 1px solid var(--w95-white);
  border-left: 1px solid var(--w95-white);
  border-right: 1px solid var(--w95-gray-darker);
  border-bottom: 1px solid var(--w95-gray-darker);
  box-shadow: 2px 2px 0 var(--w95-black, #000);
  padding: 8px 12px;
  font-size: 12px;
  max-width: 280px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.achievement-toast.hidden {
  display: none;
}

.achievement-toast.visible {
  opacity: 1;
}

.ach-toast-badge {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.ach-toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ach-toast-label {
  font-size: 11px;
  color: var(--w95-gray-darker);
  font-weight: bold;
}

.ach-toast-title {
  font-weight: bold;
  color: var(--w95-black);
}

.ach-toast-desc {
  font-size: 11px;
  color: var(--w95-gray-dark);
}

/* ---------------------------------------------------------------------- */
/* Achievements App                                                         */
/* ---------------------------------------------------------------------- */
.app-achievements {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 6px;
}

.ach-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ach-tabs {
  display: flex;
  gap: 4px;
}

.ach-tab.active {
  box-shadow: inset 1px 1px 0 var(--w95-gray-dark),
              inset -1px -1px 0 var(--w95-gray-light);
}

.ach-category-select {
  font-size: 12px;
  padding: 1px 4px;
  flex: 1;
  min-width: 80px;
}

.ach-summary {
  font-size: 12px;
  padding: 4px 6px;
  flex-shrink: 0;
}

.ach-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

.ach-card {
  border-top: 1px solid var(--w95-white);
  border-left: 1px solid var(--w95-white);
  border-right: 1px solid var(--w95-gray-darker);
  border-bottom: 1px solid var(--w95-gray-darker);
  background: var(--w95-gray);
  padding: 6px 8px;
}

.ach-card.ach-unlocked {
  background: #f0fff0;
}

.ach-card.ach-locked {
  opacity: 0.7;
}

.ach-card.ach-secret.ach-locked {
  background: #f8f8f8;
}

.ach-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.ach-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.ach-title {
  font-weight: bold;
  font-size: 13px;
  flex: 1;
}

.ach-status {
  font-size: 11px;
  color: #1a6b1a;
  font-weight: bold;
  flex-shrink: 0;
}

.ach-desc {
  font-size: 12px;
  margin: 0 0 3px;
  color: var(--w95-gray-darker);
  line-height: 1.4;
}

.ach-meta {
  font-size: 11px;
  margin: 0;
  color: var(--w95-gray-dark);
}

.ach-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.ach-progress-bar {
  flex: 1;
  height: 10px;
  background: var(--w95-white);
  overflow: hidden;
}

.ach-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--w95-blue-light), #3cb8f0);
  transition: width 0.3s ease;
}

.ach-progress-label {
  font-size: 11px;
  color: var(--w95-gray-darker);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Calendar App                                                            */
/* ---------------------------------------------------------------------- */
.app-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 6px;
}

.calendar-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-summary span,
.calendar-day-label,
.calendar-today-label {
  color: var(--w95-gray-dark);
  font-size: 11px;
}

.calendar-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}

.calendar-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 3px;
  vertical-align: -1px;
  border: 1px solid var(--w95-gray-dark);
}

.calendar-rest-swatch { background: #ffd6d6; }
.calendar-night-swatch { background: #d9e4ff; }
.calendar-current-swatch { outline: 2px solid #000080; }
.calendar-locked-swatch { background: #d0d0d0; }

.calendar-locked-notice {
  padding: 4px 6px;
  border: 1px solid #a0a0a0;
  background: #e0e0e0;
  color: #666;
  font-size: 11px;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px;
}

.calendar-day {
  position: relative;
  min-height: 58px;
  padding: 5px;
  border: 1px solid var(--w95-gray-dark);
  background: var(--w95-white);
  box-sizing: border-box;
}

.calendar-day-number {
  display: block;
  font-size: 16px;
  font-weight: bold;
}

.calendar-day-label { display: block; margin-top: 3px; }
.calendar-rest-day { background: #fff0f0; }
.calendar-night-duty { background: #eef3ff; }
.calendar-rest-day.calendar-night-duty { background: #f4eaff; }
.calendar-locked-day {
  background: #d0d0d0;
  border-color: #b0b0b0;
  color: #888;
}

.calendar-locked-day .calendar-day-label {
  color: #888;
}

.calendar-current-day {
  outline: 2px solid #000080;
  outline-offset: -2px;
}

.calendar-today-label {
  position: absolute;
  right: 4px;
  top: 5px;
  color: #000080;
  font-weight: bold;
}