/*
 * FCL live LINE inbox appearance only.
 * Load after styles.css and line-workspace.css. The companion script toggles
 * .line-workflow-mode; removing that class restores the original presentation.
 * Keep the app's panel-collapse/focus controls, DOM, and all
 * messaging/CRM handlers. This file does not embed the official LINE service.
 */
/* Only the newly added controls/notice need readable base styles when off. */
#line-page .line-page-view-actions {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

/* The original toolbar treats buttons as 32/40px icons. These two new controls
   contain text, so they need intrinsic sizing in both enabled and off modes.
   Use their IDs to outrank the legacy :not(#line-page-toggle-focus) rule. */
#line-page .line-page-view-actions #fcl-line-workflow-toggle,
#line-page .line-page-view-actions #fcl-line-official-chat-link {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

#line-page .fcl-line-official-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

#line-page .fcl-line-workflow-notice {
  flex: 0 0 auto;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid #dde5e1;
  border-radius: 8px;
  background: #f8faf9;
  color: #43584c;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* The notice is new vertical chrome. Subtract its measured height (including
   its 10px bottom margin) from the original non-focus viewport budget so the
   added row does not move the composer farther down on shorter screens.
   The script updates this variable via ResizeObserver when text wraps.
   Keep the original minimum height, maximum height, columns and focus sizing. */
#line-page:not(.line-focus-mode) .line-inbox-workspace {
  height: min(620px, calc(100dvh - 264px - var(--fcl-line-workflow-notice-space, 56px)));
}

#line-page.line-workflow-mode {
  --fcl-line-green: #087d42;
  --fcl-line-green-hover: #066435;
  --fcl-line-green-soft: #eaf8ee;
  --fcl-line-border: #dfe5e2;
  --fcl-line-ink: #183329;
  --fcl-line-muted: #63766b;
  background: #f6f8f7;
}

#line-page.line-workflow-mode .line-page-header {
  border-color: var(--fcl-line-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-page-heading h2 {
  color: var(--fcl-line-ink);
}

#line-page.line-workflow-mode .line-page-heading p {
  color: var(--fcl-line-muted);
}

#line-page.line-workflow-mode .line-inbox-workspace {
  gap: 10px;
  /* Do not override columns: existing collapse/focus rules own them. */
}

#line-page.line-workflow-mode .line-inbox-list-panel,
#line-page.line-workflow-mode .line-inbox-chat-panel,
#line-page.line-workflow-mode .line-inbox-detail-panel {
  min-width: 0;
  border-color: var(--fcl-line-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-inbox-search {
  border-bottom-color: var(--fcl-line-border);
  background: #fff;
}

#line-page.line-workflow-mode #line-inbox-search {
  border-color: var(--fcl-line-border);
  border-radius: 7px;
  background: #f8faf9;
  color: var(--fcl-line-ink);
}

#line-page.line-workflow-mode .line-inbox-summary button {
  border-color: var(--fcl-line-border);
  border-radius: 7px;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-inbox-summary button.active {
  border-color: #b6ddc1;
  background: var(--fcl-line-green-soft);
  color: #185d31;
}

#line-page.line-workflow-mode .line-inbox-list {
  gap: 2px;
  padding: 5px;
  background: #fff;
}

#line-page.line-workflow-mode .line-inbox-contact {
  min-height: 78px;
  border-color: transparent;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-inbox-contact:hover {
  transform: none;
  border-color: #e6ece8;
  background: #f4f7f5;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-inbox-contact.active {
  border-color: #c3e5cb;
  background: var(--fcl-line-green-soft);
  box-shadow: inset 3px 0 0 var(--fcl-line-green);
}

#line-page.line-workflow-mode .line-inbox-contact-copy strong {
  color: var(--fcl-line-ink);
  font-size: 14px;
  font-weight: 700;
}

#line-page.line-workflow-mode .line-inbox-contact-copy small,
#line-page.line-workflow-mode .line-inbox-contact-copy em,
#line-page.line-workflow-mode .line-inbox-contact-side time {
  color: var(--fcl-line-muted);
}

#line-page.line-workflow-mode .line-inbox-contact-side b {
  background: var(--fcl-line-green);
  color: #fff;
}

#line-page.line-workflow-mode .line-inbox-avatar {
  background: #eaf4ee;
  color: #23613a;
}

#line-page.line-workflow-mode .line-inbox-chat-header {
  border-bottom-color: var(--fcl-line-border);
  background: #fff;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-inbox-chat-header strong {
  color: var(--fcl-line-ink);
}

#line-page.line-workflow-mode .line-inbox-collaboration-toolbar {
  border-color: var(--fcl-line-border);
  background: #fcfdfc;
}

#line-page.line-workflow-mode .line-inbox-chat-actions .ghost,
#line-page.line-workflow-mode .line-inbox-collaboration-toolbar .ghost,
#line-page.line-workflow-mode .line-inbox-tools .ghost {
  border-color: var(--fcl-line-border);
  border-radius: 7px;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-inbox-messages {
  background: #f2f5f3;
}

#line-page.line-workflow-mode .line-inbox-message.customer .line-inbox-bubble:not(.line-inbox-sticker-bubble),
#line-page.line-workflow-mode .line-inbox-message.staff .line-inbox-bubble:not(.line-inbox-sticker-bubble) {
  border-color: #e1e8e3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(23, 48, 34, 0.05);
}

#line-page.line-workflow-mode .line-inbox-message.customer .line-inbox-bubble:not(.line-inbox-sticker-bubble) {
  background: #fff;
  color: var(--fcl-line-ink);
}

#line-page.line-workflow-mode .line-inbox-message.staff .line-inbox-bubble:not(.line-inbox-sticker-bubble) {
  border-color: #c5e7c7;
  background: #def4dc;
  color: #183d25;
  box-shadow: 0 1px 2px rgba(23, 48, 34, 0.05);
}

#line-page.line-workflow-mode .line-inbox-message.staff .line-inbox-message-text {
  color: #183d25;
}

#line-page.line-workflow-mode .line-inbox-message.staff .line-inbox-message-meta {
  color: #466b4e;
}

#line-page.line-workflow-mode .line-inbox-message.staff .line-inbox-message-text a {
  color: #145b3c;
  text-decoration: underline;
}

/* Keep system/internal note colors and labels owned by the original app. */
#line-page.line-workflow-mode .line-inbox-composer:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 86px !important;
  align-items: center !important;
  gap: 8px !important;
  border-top-color: var(--fcl-line-border);
  background: #fff;
}

#line-page.line-workflow-mode .line-inbox-composer > .line-inbox-tools {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-width: 0;
}

#line-page.line-workflow-mode .line-inbox-composer > textarea {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0;
  border-color: var(--fcl-line-border);
  border-radius: 8px;
  background: #fafcfb;
}

#line-page.line-workflow-mode .line-inbox-composer > button[type="submit"] {
  grid-column: 2 !important;
  grid-row: 2 !important;
  border-radius: 8px;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-inbox-composer:not(.is-internal-note) > button[type="submit"] {
  border-color: var(--fcl-line-green);
  background: var(--fcl-line-green);
  color: #fff;
}

#line-page.line-workflow-mode .line-inbox-composer:not(.is-internal-note) > button[type="submit"]:hover:not(:disabled) {
  border-color: var(--fcl-line-green-hover);
  background: var(--fcl-line-green-hover);
}

#line-page.line-workflow-mode .line-inbox-composer > .line-inbox-draft-status {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

#line-page.line-workflow-mode .line-inbox-detail-panel {
  background: #f9fbfa;
}

#line-page.line-workflow-mode .line-inbox-profile,
#line-page.line-workflow-mode .line-inbox-tag-form,
#line-page.line-workflow-mode .line-inbox-side-section {
  border-color: var(--fcl-line-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

#line-page.line-workflow-mode .line-inbox-note-input {
  border-color: var(--fcl-line-border);
  background: #fafcfb;
}

#line-page.line-workflow-mode .line-inbox-tag-form > button[type="submit"] {
  border-color: var(--fcl-line-green);
  background: var(--fcl-line-green);
  color: #fff;
  box-shadow: none;
}

#line-page.line-workflow-mode .fcl-line-official-link {
  border-color: #b6ddc1;
  background: var(--fcl-line-green-soft);
  color: #185d31;
  text-decoration: none;
}

#line-page.line-workflow-mode .fcl-line-workflow-toggle[aria-pressed="true"] {
  border-color: #b6ddc1;
  background: var(--fcl-line-green-soft);
  color: #185d31;
}

#line-page.line-workflow-mode .fcl-line-workflow-notice {
  border-color: #c7e3ce;
  background: #f0f9f2;
  color: #31563a;
}

#line-page.line-workflow-mode :is(button, a, input, textarea, select):focus-visible {
  outline: 3px solid #248249;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  /* Inherit the app's single-column stack and panel-collapse rules unchanged. */
  #line-page.line-workflow-mode .line-inbox-workspace {
    gap: 10px;
  }

  #line-page.line-workflow-mode .line-inbox-composer:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) 68px !important;
    gap: 5px !important;
  }

  #line-page.line-workflow-mode .line-inbox-composer > textarea {
    font-size: 16px;
  }

  #line-page.line-workflow-mode .line-inbox-composer > button[type="submit"] {
    /* Legacy mobile styles force 78px !important; match our 68px grid track. */
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    padding-right: 6px;
    padding-left: 6px;
  }
}

/* V3: compact Office shell and three-column inbox based on the approved design.
   All existing navigation, chat and CRM nodes retain their original handlers. */
#app-shell .fcl-line-app-bar {
  display: none;
}

#app-shell.line-mode.fcl-line-layout-enabled .fcl-line-app-bar {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-width: 0;
  padding: 10px 18px;
  border-bottom: 1px solid #d7e4f7;
  background: #fff;
  color: #173459;
}

#app-shell .fcl-line-app-brand,
#app-shell .fcl-line-app-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
}

#app-shell .fcl-line-app-brand img {
  width: 32px;
  height: 30px;
  object-fit: contain;
}

#app-shell .fcl-line-live-label {
  padding: 5px 9px;
  border-radius: 6px;
  background: #e8f8ee;
  color: #176337;
  font-size: 11px;
}

#app-shell #fcl-line-dashboard-toggle {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 12px;
}

#line-page.line-workflow-mode {
  --fcl-line-green: #1e3a63;
  --fcl-line-green-hover: #142e53;
  --fcl-line-green-soft: #eaf2ff;
  --fcl-line-border: #d7e4f7;
  --fcl-line-ink: #102e53;
  --fcl-line-muted: #607998;
  background: #f5f8ff;
}

#line-page.line-workflow-mode .line-page-header {
  border: 0;
  border-radius: 0;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
}

#line-page.line-workflow-mode .line-page-heading h2 {
  font-size: 16px;
}

#line-page.line-workflow-mode:not(.fcl-line-show-dashboards) #line-page-status,
#line-page.line-workflow-mode:not(.fcl-line-show-dashboards) .line-page-grid {
  display: none;
}

#line-page.line-workflow-mode.fcl-line-show-dashboards #line-page-status {
  display: block;
}

#line-page.line-workflow-mode.fcl-line-show-dashboards .line-page-grid {
  display: grid;
  flex: 0 0 auto;
}

#line-page.line-workflow-mode .line-inbox-list-panel,
#line-page.line-workflow-mode .line-inbox-chat-panel,
#line-page.line-workflow-mode .line-inbox-detail-panel {
  border-color: #d7e4f7;
  border-radius: 10px;
}

#line-page.line-workflow-mode .line-inbox-contact.active {
  border-color: transparent;
  background: #eaf2ff;
  box-shadow: inset 3px 0 0 #1e3a63;
}

#line-page.line-workflow-mode .line-inbox-messages {
  background: #f6f8fb;
}

#line-page.line-workflow-mode .line-inbox-message.staff .line-inbox-bubble:not(.line-inbox-sticker-bubble) {
  border-color: #cdddf5;
  background: #eaf2ff;
  color: #102e53;
}

#line-page.line-workflow-mode .line-inbox-message.staff .line-inbox-message-text {
  color: #102e53;
}

#line-page.line-workflow-mode .line-inbox-detail-panel {
  background: #fff;
}

@media (min-width: 761px) {
  #app-shell.line-mode.fcl-line-layout-enabled {
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1600px, 100vw);
    max-width: 100vw;
    padding: 0;
    border-radius: 14px;
    background: #f5f8ff;
  }

  #app-shell.line-mode.fcl-line-layout-enabled > .sidebar {
    display: none !important;
  }

  #app-shell.line-mode.fcl-line-layout-enabled > .workspace-rail {
    display: flex !important;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    gap: 8px;
    width: 74px;
    min-width: 0;
    margin: 0;
    padding: 12px 6px;
    border: 0;
    border-right: 1px solid #d7e4f7;
    border-radius: 0;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #app-shell.line-mode.fcl-line-layout-enabled .rail-avatar,
  #app-shell.line-mode.fcl-line-layout-enabled .rail-group-label {
    display: none;
  }

  #app-shell.line-mode.fcl-line-layout-enabled .rail-group {
    gap: 5px;
    padding: 0;
  }

  #app-shell.line-mode.fcl-line-layout-enabled .rail-button {
    width: 54px;
    min-width: 54px;
    min-height: 56px;
    padding: 6px 3px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: #607998;
    font-size: 11px;
  }

  #app-shell.line-mode.fcl-line-layout-enabled .rail-button.active {
    background: #eaf2ff;
    color: #1e3a63;
  }

  #app-shell.line-mode.fcl-line-layout-enabled .rail-icon {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: inherit;
  }

  #app-shell.line-mode.fcl-line-layout-enabled #line-page {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-height: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    overflow: auto;
  }

  #line-page.line-workflow-mode .line-inbox-workspace {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 380px;
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) minmax(220px, 260px);
    gap: 12px;
  }

  /* Legacy tablet CSS spans CRM across a second row. Keep the approved
     three-column design on desktop/tablet; mobile keeps its existing stack. */
  #line-page.line-workflow-mode .line-inbox-list-panel {
    grid-column: 1;
    grid-row: 1;
  }

  #line-page.line-workflow-mode .line-inbox-chat-panel {
    grid-column: 2;
    grid-row: 1;
  }

  #line-page.line-workflow-mode .line-inbox-detail-panel {
    grid-column: 3;
    grid-row: 1;
    max-height: none;
    min-height: 0;
  }

  #line-page.line-workflow-mode .line-inbox-workspace.line-list-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) minmax(220px, 260px);
  }

  #line-page.line-workflow-mode .line-inbox-workspace.line-detail-collapsed {
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) 0;
  }

  #line-page.line-workflow-mode .line-inbox-workspace.line-list-collapsed.line-detail-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }
}

@media (max-width: 760px) {
  #app-shell.line-mode.fcl-line-layout-enabled {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding-top: 0;
  }

  #app-shell.line-mode.fcl-line-layout-enabled #line-page {
    grid-row: 2;
    grid-column: 1;
  }

  #app-shell.line-mode.fcl-line-layout-enabled .fcl-line-app-bar {
    padding: 8px;
  }
}

/* Keep narrow prototype columns usable with real contact names. Time and
   unread counts use the second row rather than stealing the name's width. */
#line-page.line-workflow-mode .line-inbox-contact {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 5px 10px;
  max-height: none;
}

#line-page.line-workflow-mode .line-inbox-contact > .line-inbox-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
}

#line-page.line-workflow-mode .line-inbox-contact-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

#line-page.line-workflow-mode .line-inbox-contact-copy strong {
  display: -webkit-box;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#line-page.line-workflow-mode .line-inbox-contact-side {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#line-page.line-workflow-mode .line-inbox-contact-side time {
  font-size: 10px;
}