/* ====== Typography / Base ====== */

/* ====== Oracle Sans Webfonts ====== */
@font-face {
  font-family: "Oracle Sans";
  src: url("/fonts/OracleSans-Regular.woff2") format("woff2"),
       url("/fonts/OracleSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oracle Sans";
  src: url("/fonts/OracleSans-SemiBold.woff2") format("woff2"),
       url("/fonts/OracleSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oracle Sans";
  src: url("/fonts/OracleSans-Bold.woff2") format("woff2"),
       url("/fonts/OracleSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root{
  --bg: #ffffff;
  --ink: #121212;
  --muted: #5f6368;
  --border: #E5E7EB;
  --surface: #F7F8F9;
  --primary: #2662D9;
}

* { box-sizing: border-box; }
html, body {margin: 0;
  padding: 0; }
html { color-scheme: light; }
body {
  margin: 0;
  padding: 0;
   font-size: 0.9rem; 
     font-weight: 400;

  font-family: "Oracle Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ====== App Layout ======
   Two areas:
   - Left: chat column (flex column, input sticky at bottom)
   - Right: drawer (fixed panel, scrolls independently) */

.app{
  height: calc(100vh);       /* take the remaining space */
  display: flex; 
  overflow:hidden;                   /* keeps chat + drawer side-by-side */
}

/* ====== Chat column ====== */
.chat{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  min-width: 0; /* prevents overflow in flex layouts */
}

/* Top bar */
/* Global topbar spans the whole page */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: white;
  z-index: 1000; /* sits above drawer/content */
}


.brand { font-weight: 600; }
.spacer { flex: 1; }
.btn {
  border: 1px solid var(--border);
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.btn.primary {
  border-color: transparent;
  background: black;
  color: #fff;
  font-size: 14px;
}

/* Messages area scrolls; input stays visible */
.messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  z-index: 2;
  flex-direction: column;
  align-items: center; /* center all bubbles by default */
}

/* Chat bubbles (AI + user) */
.bubble {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  max-width: 860px;
  width: 100%;               /* allow centering control */
}

/* AI bubbles: centered and left-aligned text */
.bubble:not(.user) {
  align-self: center;
  text-align: left;
}

/* User bubbles: align to the right but not full width */
.bubble.user {
  background: #f1f0eb;
  text-align: right;
  width: auto;
  align-self: flex-end;       /* push bubble to the right */
  max-width: 60%;             /* take up ~60% of the row, like ChatGPT */
}

/* Input bar pinned to bottom */
.inputbar {
  position: sticky;  /* <- keeps it stuck to the bottom of the chat column */
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
padding: 10px 50px;
}

/* Remove blue outline on input focus */
.input:focus,
#q:focus {
  outline: none;
  box-shadow: none;
}


.input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 12px;
  background: #f2f2f2;
  border: none;
  border-radius: 10px;
}

/* Drawer (right) */
#drawer{flex:0 0 0;width:0;min-width:0;overflow:hidden; background: white; 
              no-repeat center center;
  background-size: cover;
  position: relative;;transition:flex-basis .18s ease,width .18s ease}
#drawer.open {
  flex: 0 0 50vw;       /* drawer covers 70% of viewport */
  width: 70vw;  
  z-index: 3;        /* same here */
  max-width: 550px;     /* still prevents it from collapsing too small */
  border-left: 1px solid var(--border);
}.drawer-content{height:100%;display:flex; background: #f7f7f7;flex-direction:column}
.drawer-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;     font-size: 22px;
    font-weight: bold; gap:8px}
.drawer-body {
  padding: 10px;
  overflow-y: auto;   /* allow vertical scroll */
  overflow-x: hidden; /* prevent horizontal overflow */
  flex: 1 1 auto;     /* make it grow/shrink inside drawer-content */
}

.panel {
  border-radius: 10px;
  padding: 12px;
  background: #faf9f7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); /* 👈 stronger shadow */
  margin-bottom: 16px; /* space between panels */
}

/* Panels grid inside the drawer */
.panels-grid{
  display: grid;
  grid-template-columns: 1fr;      /* default: 1 column */
  gap: 16px;
}

/* Large screens: 2 columns */
@media (min-width: 500px){
  .panels-grid{
    grid-template-columns: 1fr 1fr; /* 2 columns */
  }
}

/* Allow specific cards to span both columns when needed */
.panels-grid .panel.wide{
  grid-column: 1 / -1;
}


.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 0 0 12px 0;
  position: relative;
  padding-bottom: 10px;
  margin-left: 20px;
  padding-top: 15px;
}

.panel-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;         /* short accent bar */
  height: 3px;
  background-color: #2c6d82; /* choose Oracle accent color */
  border-radius: 2px;
}

/* ====== Key/Value stacked layout ====== */
.kv {
  flex-direction: column;
}

.kv .k {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
    margin-left: 20px;

  margin-bottom: 2px; /* space between label and its value */
}

.kv .v {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin-bottom: 12px; /* space after the value */
  margin-left: 20px;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #detailDrawer {
    transition: none;
  }
}


/* Ensure drawer text is visible (inherit normal text color) */
#detailDrawer,
#detailDrawer .drawer-content,
#detailDrawer .drawer-body,
#detailDrawer .drawer-body * {
  color: var(--text) !important;
}

/* Table readability inside the drawer */
#detailDrawer .drawer-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text) !important;
}

#detailDrawer .drawer-body th,
#detailDrawer .drawer-body td {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
  padding: 8px 6px;
  vertical-align: top;
  word-break: break-word;
}




/* ====== Table (fits panel) ======
   - Fixed layout + ellipsis to prevent overflow
   - Scroll container handled by .drawer-body
*/
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* critical: columns fit panel width */
  font-size: 14px;
}
th, td {
  border-bottom: 1px solid var(--border);
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
  overflow: hidden;             /* prevent expanding columns */
  text-overflow: ellipsis;      /* show ellipsis when truncated */
  white-space: nowrap;          /* keep rows compact; remove if multi-line preferred */
}
thead th {
  position: sticky;  /* nice: keep headers visible on scroll */
  top: 0;
  background: #fff;
  z-index: 1;
}

/* Subtle helper */
.subtle { color: var(--muted); 
margin-left: 20px}

/* Small inline spinner */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid #d0d7e2;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* On smaller screens, let the drawer take more width */
@media (max-width: 1024px) {
  #detailDrawer { width: min(600px, 100vw); }
}



/* ===== Detail Drawer table (single source of truth) ===== */
#detailHost { --cell-pad: 10px;   min-width: 0;
    padding: 5px;
    border-radius: 12px; }

/* Default tables (like drawer "Show more") */
#detailHost .table-wrap {
  display: block;
  width: 100%;
  padding: 5px;                /* default padding */
  border-radius: 12px;
  max-width: 100%;
  height: 100%;
  overflow: auto;
}

/* Tables inside panels grid (masonry cards) */
#detailHost .panels-grid .panel .table-wrap {
  padding: 4px;                  /* 👈 different padding for panel tables */
  max-height: 300px;           /* keep your cap here */
  overflow-y: auto;
}

#detailHost table {
  width: 100%;
  border-collapse: collapse;
table-layout: auto !important;
  font-size: 14px;
  margin-left: 10px;
}

#detailHost thead th {
  position: sticky;                  /* keep header visible while scrolling */
  top: 0;
  z-index: 1;
  background: #fff;                  /* or var(--surface) */
  font-weight: 600;
  text-align: left;
  padding: var(--cell-pad) 8px;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  word-break: break-word;
}

/* Default: drawer tables */
#detailHost tbody td {
  padding: var(--cell-pad) 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: normal;   /* wrap values, no ellipsis */
  word-break: break-word;/* break long tokens */
}

/* Override: panel-grid tables (masonry cards) */
#detailHost .panels-grid .panel tbody td {
  padding: 2px 8px;  
  border: none;    /* tighter padding inside cards */
}

#detailHost tbody tr:last-child td {
  border-bottom: 0;
}


.brand { display: flex; align-items: center; gap: 8px; }
.brand-logo { height: 20px; width: auto; display: block; object-fit: contain; }

/* optional: hide the fallback text visually but keep it for screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Decorative strip under drawer header */
.drawer-strip {
  width: 100%;
  height: 12px; /* adjust thickness */
  background: url('/images/strip.png') repeat-x;
  background-size: auto 100%; /* scale vertically, repeat horizontally */
}

/* AI typing indicator */
.ai-typing {
  display: inline-flex;
  gap: 4px;
  color: black;
  align-items: center;
  height: 18px;
}

.ai-typing span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  animation: ai-bounce 1.2s infinite ease-in-out;
}

.ai-typing span:nth-child(1) { animation-delay: 0s; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.2; }
  40% { transform: scale(1); opacity: 1; }
}


/* ===== Enhanced Input Bar (icons + field inside one container) ===== */

.inputbar.inputbar-enhanced {
  padding: 12px;
}

/* Central card that holds icons row + input row */
.inputbar .inputbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Top row: icons */
.inputbox-icons {
  display: flex;
  align-items: center;
  gap: 10px;
      padding-left: 10px;
    padding-top: 15px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(0,0,0,0.06); }
.icon-btn:focus { outline: none; }
.icon-btn i { font-size: 18px; color: #000; } /* Font Awesome icons */

/* Bottom row: input + Send button */
.inputbox-fieldrow {
  display: flex;
  align-items: center;
  padding: 0 8px 8px 8px;
  gap: 8px;
}

.inputbox-fieldrow .input {
  flex: 1 1 auto;
  padding: 10px 12px;
  border: none;             /* 🚫 no border */
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--text, #222);
}

/* ensure no focus ring or border shows */
.inputbox-fieldrow .input:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.inputbar .btn {
  border: none;
  background: transparent;
  cursor: pointer;
}

.inputbar .btn:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.inputbar .btn.primary {
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #fff;
}

/* Optional: keep legacy helpers working if present */
.tall-inputbar,
.search-icons-row,
.search-row { all: unset; }

.inputbar .btn.primary {
  height: 40px;
  width: 44px; /* square button */
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white; /* match input */
  cursor: pointer;
}

.inputbar .btn.primary:hover {
  background: rgba(0,0,0,0.06);
}

.inputbar .btn.primary i {
  font-size: 25px;
}

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.modal {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
}
.modal-header, .modal-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.modal-body label {
  display: flex; flex-direction: column;
  margin-bottom: 8px;
  font-size: 14px;
}
.close-btn { background: none; border: none; font-size: 20px; cursor: pointer; }

/* make the + button visible in panel toolbars */
.panel-toolbar .add-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid var(--border, #e6e6e6);
  border-radius:6px;
  background:#fff;
  cursor:pointer;
}
.panel-toolbar .add-btn i{ font-size:16px; line-height:1; }
.panel-toolbar .add-btn:hover{ background:rgba(0,0,0,0.05); }

/* Vertical cards instead of traditional table */
.panel-body .table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.panel-body .table-wrap thead {
  display: none; /* hide column headers */
}

/* Default spacing (drawer + other tables) */
.panel-body .table-wrap tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ✅ Smaller gap for panel-grid tables */
.panels-grid .panel .panel-body .table-wrap tbody {
  gap: 15px;   /* tighter spacing inside cards */
}

.panel-body .table-wrap tr {
  display: block;
  border-radius: 8px;
}

.panel-body .table-wrap td {

  display: block;
  padding: 2px 0;
  font-size: 14px;
  line-height: 1.4;
}

/* show column name as subtle label */
.panel-body .table-wrap td::before {
  content: attr(data-label);
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 1px;
}


a.drill-link,
a.entity-link {
  color: #000;
  font-weight: 600;       /* bold */
  text-decoration: none;  /* no underline */
}

a.drill-link:hover,
a.entity-link:hover {
  text-decoration: underline; /* optional on hover */
}



.tag-chip {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 8px;
  cursor: pointer;
  background: #f6f6f6;
}
.tag-chip.selected {
  background: #309022;
  color: #fff;
  border-color: var(--accent);
}
.rich-editor {
  font-family: inherit;
  outline: none;
}

.email-bubble { background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px; }
.email-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.email-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.icon-btn { padding:2px 8px; border-radius:6px; cursor:pointer; }
.email-status { margin-left:6px; }

/* Chat AI tables */
.ai-list{ margin:.25rem 0 0 1.1rem }
  .ai-list li{ margin:.25rem 0 }
  .ai-table-wrap{ overflow:auto }
  .ai-table{ width:100%; border-collapse:collapse }
  .ai-table th,.ai-table td{ border:1px solid var(--border); padding:6px 8px; text-align:left; vertical-align:top }
  .ai-table th{ background:#f7f7f8 }
  
.ai-msg ul { margin: 6px 0 6px 18px; padding: 0; }
.ai-msg li { margin: 4px 0; }
.ai-msg strong { font-weight: 600; }


 .drawer-tabs {
    display:flex; gap:6px; align-items:flex-end; margin:0 0 8px 0; flex-wrap:wrap;
    border-bottom:1px solid var(--border);
  }
  .drawer-tab {
    display:flex; align-items:center; gap:6px;
    padding:6px 10px; border:1px solid var(--border); border-bottom:none;
     border-top-right-radius:8px;
    background:#f9fafb; cursor:pointer; user-select:none;
  }
  .drawer-tab.active { background:#fff; font-weight:600; }
  .drawer-tab .close {
    border:none; background:transparent; cursor:pointer; font-size:14px; opacity:.7;
  }
  .drawer-pane { display:none; }
  .drawer-pane.active { display:block; }

.bubble.ai.thinking {
  font-style: italic;
  color: #666;
  font-size: 14px;
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  opacity: 0.9;
}


/* Special style for the "thinking" states */
.msg.ai .bubble.thinking {
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 10px 14px;
  font-style: italic;
  color: #555;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  max-width: 720px;
  font-size: 14px !important;
}



/* Force thinking bubbles to align left like normal AI bubbles */
.bubble.ai.thinking {
  align-self: flex-start !important;
  width: auto !important;
  max-width: 860px;  /* match your normal AI bubble width */
}

.corner-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 300px;
  pointer-events: none;
  z-index: 1;   /* above the background */
}

.input-bar {   /* your chat input */
  position: relative;
  z-index: 10; /* make sure input stays above */
}

/* Only target real AI bubbles, not thinkers */
/* Only target real AI bubbles, not thinkers */
.bubble:not(:first-child):not(.user):not(.thinking):not(:has(.ai-typing))::after {
  content: url("https://static.oracle.com/cdn/fnd/gallery/2301.2.0/images/ico-bookmark.svg");
  position: absolute;
  top: 6px;
  right: 8px;
  width: 14px;
  height: 14px;
  opacity: 0.7;
  cursor: pointer;
}

/* Make sure .bubble has relative positioning */
.bubble {
  position: relative;
}

/* Hover effect */
.bubble:not(.thinking):hover::after {
  opacity: 1;
}

.myday-wrap { display:grid; grid-template-columns:80px 1fr; gap:10px; }
.myday-hours { display:flex; flex-direction:column; gap:8px; color:#666; font-size:12px; }
.myday-hour { line-height:1; }
.myday-list { display:flex; flex-direction:column; gap:8px; }
.myday-item { display:grid; grid-template-columns:70px 1fr; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.myday-time { font-weight:600; color:black; }
.myday-subject { font-weight:600; }
.myday-meta { margin-top:2px; color:#666; font-size:12px; }
.myday-empty { color:#666; font-style:italic; }

/* Hourly column layout */
.myday-hours-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Hour card */
.myday-card {
  border: 1px solid var(--border, #eee);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
      margin-left: 15px;
    margin-right: 15px;
}

.myday-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.myday-time {
  font-weight: 700;
  letter-spacing: .2px;
  color: black;
}

.myday-kebab {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  color: #666;
}
.myday-kebab:hover { color: #135F56; }

/* Menu */
.myday-menu {
  position: absolute;
  margin-top: 4px;
  right: 12px;
  z-index: 10;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  min-width: 130px;
  overflow: hidden;
}
.myday-card-head { position: relative; } /* anchor the menu */

.myday-menu-item {
  padding: 8px 10px;
  text-align: left;
  background: #fff;
  border: none;
  cursor: pointer;
  font: inherit;
  color: #222;
}
.myday-menu-item:hover { background: #f6f6f6; }

.myday-subject { font-weight: 600; }
.myday-meta { color: #666; font-size: 12px; margin-top: 2px; }
.myday-extra { color: #888; font-size: 12px; margin-top: 6px; }

.myday-menu[hidden] { display: none !important; }
.myday-location {
  min-height: 18px;         /* creates “space” even if empty */
  margin-top: 2px;
  color: #333;
}

/* My Day button row aligns with bubble width but text is left */
.myday-holder{
  align-self: center;   /* center the container like bubbles */
  width: 100%;
  max-width: 860px;     /* same cap as .bubble */
  text-align: left;     /* left-align the button */
  margin: 6px 0 10px 0;
}

.panel.panel-myday { /* outer card */ }
.panel.panel-myday .panel-header { /* header */ }
.panel.panel-myday .panel-content { /* body */ }
.panel.panel-myday .myday-card { /* inner items */ }

/* ===== Tasks panel ===== */
.panel[data-key="tasks"], .panel.panel-tasks { /* use either data-key or a class if you add one */
  /* optional custom look */
}

.tasks-panel { display:flex; flex-direction:column; gap:10px; }

/* Toolbar */
.tasks-toolbar {
  position: relative; /* anchor menus */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-left:15px;
    margin-right:15px;

}

.tasks-searchwrap { width: 100%; }
.tasks-search {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border,#e6e6e6);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}

.tasks-chips { display:flex; gap: 6px; }
.chip {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border,#e6e6e6);
  border-radius: 16px;
  background: #fff;
  font: inherit;
  cursor: pointer;
  color: #222;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:hover { background: #f7f7f7; }
.chip-caret { opacity: .7; }

/* Chip menus */
.chip-menu {
  position: absolute;
  z-index: 10;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.chip-menu[hidden] { display: none !important; }

.chip-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* === Tasks panel table === */
.tasks-tablewrap {
  overflow: auto;
  border-radius: 10px;
}

.tasks-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  padding: 8px 6px;
  font: inherit;
}

/* Cells */
.tasks-table thead th,
.tasks-table tbody td {
  text-align: left;
  padding: 10px 8px !important;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

/* Sticky header */
.tasks-table thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 1;
  font-weight: 600;
}

/* Responsive “card rows” using data-label on <td> */
@media (max-width: 640px) {
  .tasks-table thead { display: none; }

  .tasks-table,
  .tasks-table tbody,
  .tasks-table tr,
  .tasks-table td {
    display: block;
    width: 100%;
  }

  .tasks-table tr {
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 10px 6px;
  }

  .tasks-table td {
    border: none;
    border-bottom: 1px dashed #f0f0f0;
    position: relative;
    padding: 8px 0 8px 110px; /* space for label */
    min-height: 28px;
  }
  .tasks-table td:last-child { border-bottom: none; }

  .tasks-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 8px;
    font-weight: 600;
    color: #666;
  }
}

/* Background color for Tasks table body */
.tasks-table tbody {
  background-color: #faf9f7;
}

.panel-header .panel-edit-btn {
  margin-left: 8px;
  padding: 6px;
  border-radius: 8px;
  line-height: 1;
}
.panel-header .panel-edit-btn i { font-size: 14px; }

/* === Edit panel (final, consolidated) === */

/* Two-column grid inside the Edit panel */
.edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two equal columns */
  gap: 16px 24px;                   /* row gap / column gap */
}

/* Each field */
.edit-field {
  position: relative;
  width: 100%;
  margin: 0;                        /* keep rows tight; grid handles spacing */
}

/* Input with floating-label spacing */
.edit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 12px 6px;           /* top space for label */
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background: #fafafa;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Oracle Sans';
  margin-top: 2px;
  color: #222;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.edit-input:focus {
  border-color: #006fe6;
  box-shadow: 0 0 0 2px rgba(0,111,230,.2);
  outline: none;
  background: #fff;
}

.edit-input[readonly] {
  background: #f5f5f5;
  color: #555;
}

/* Floating label */
.edit-label {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 13px;
  color: #777;
  pointer-events: none;
  transition: .2s ease all;
}

/* Float when focused or when value present (needs placeholder=" " on input) */
.edit-input:focus + .edit-label,
.edit-input:not(:placeholder-shown) + .edit-label {
  top: 4px;
  font-size: 11px;
  color: #555;
}

/* Save row spans full width */
.edit-actions {
  margin-top: 20px;
  grid-column: 1 / -1;             /* span both columns */
  display: flex;
  justify-content: flex-end;
}

/* Optional: stack to one column on small screens */
@media (max-width: 680px) {
  .edit-grid { grid-template-columns: 1fr; }
}

/* Contact pie panel */
.pie-wrap { display:flex; flex-direction:column; gap:10px; }
.pie-title { font-weight:700; }
.pie-flex { display:flex; gap:16px; align-items:center; }
.pie-svg { width: 180px; height: 180px; flex: 0 0 auto; }
.pie-legend { display:flex; flex-direction:column; gap:6px; }
.pie-legend-item { display:flex; align-items:center; gap:8px; font-size:14px; }
.pie-legend-item .swatch { width:12px; height:12px; border-radius:3px; display:inline-block; }
.pie-legend-item .name { min-width: 90px; color:#333; }
.pie-legend-item .val { font-weight:600; color:#222; }
@media (max-width: 560px){
  .pie-flex { flex-direction:column; align-items:flex-start; }
}

/* 🔒 Temporarily hide all bookmark icons */
.bubble::after {
  display: none !important;
  content: none !important;
}

/* SR by Product Line bar chart */
.srprod-wrap { display:flex; flex-direction:column; gap:8px; }
.srprod-title { font-weight:700; }
.srprod-svg { width:100%; max-width:600px; height:330px; }
.srprod-axis { stroke:#e2e2e2; stroke-width:1; }
.srprod-bar { fill:#00A3A1; }
.srprod-bar:hover { fill:#008c8b; }
.srprod-val { font-size:16px; text-anchor:middle; font-weight: 700; fill:#333; }
.srprod-lbl { font-size:16px; text-anchor:middle; font-weight: 700; fill:#555; }

/* Telco EOQ workflow: step buttons inside AI bubble (.choices) — missing styles only */
/* Based on current theme vars and font in styles.css   [oai_citation:0‡styles.css](sediment://file_000000008c4461f8bccdedf4479bbd09) */

.ai .choices,
.choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-top:10px;
}

.ai .choices button,
.choices button{
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  color:#000;
  padding:8px 12px;
  border-radius:10px;
  font:600 13px/1.1 "Oracle Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

.ai .choices button:hover,
.choices button:hover{
  background:#f7f7f7;
  transform:translateY(-1px);
}

.ai .choices button:active,
.choices button:active{
  transform:none;
  background:#f2f2f2;
}

.ai .choices button:focus-visible,
.choices button:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(0,111,230,.2);
  border-color:#006fe6;
}

/* Optional primary emphasis button */
.ai .choices button.primary,
.choices button.primary{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}
.ai .choices button.primary:hover,
.choices button.primary:hover{
  filter:brightness(.96);
}

/* ==========================================
   Redwood-style buttons for Telco workflow
   Class: .qr-btn
   ========================================== */

.qr-btn {
  font-family: "Oracle Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background-color: #ffffff;
  color: #1a1a1a;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

/* Hover */
.qr-btn:hover {
  background-color: #f4f6f8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Active (pressed) */
.qr-btn:active {
  background-color: #e9ebed;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

/* Focus (keyboard) */
.qr-btn:focus-visible {
  outline: none;
  border-color: #0057D9; /* Redwood primary blue */
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.3);
}

/* Primary accent button */
.qr-btn.primary {
  background-color: #0057D9;
  color: #fff;
  border: 1px solid #0057D9;
  box-shadow: 0 2px 4px rgba(0, 87, 217, 0.25);
}

.qr-btn.primary:hover {
  background-color: #0048b8;
}

.qr-btn.primary:active {
  background-color: #003a96;
}

/* Subtle variant (secondary action) */
.qr-btn.subtle {
  background-color: #f6f6f6;
  color: #1a1a1a;
  border: 1px solid #d9d9d9;
}

.qr-btn.subtle:hover {
  background-color: #ededed;
}

.drawer-tabs{
  display:flex; gap:6px; margin-left:10px; overflow:auto;
}
.drawer-tab{
  display:flex; align-items:center; font-size: 0.8rem; gap:6px;
  padding:6px 10px; border:1px solid var(--border); border-radius:10px;
  background:#fff; cursor:pointer; white-space:nowrap;
}
.drawer-tab.active{ background:#f1f5f9; border-color:#cbd5e1; }
.drawer-tab .x{ border:none; background:transparent; cursor:pointer; padding:0 2px; }
.drawer-tab .x:hover{ color:#b00020; }

/* Drawer layout: header (top) + scrollable body + footer (tabs) */
#drawer .drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#drawer .drawer-header {
  flex: 0 0 auto;
}

#drawer .drawer-body {
  flex: 1 1 auto;
  overflow: auto; 
    padding-bottom: 56px; /* roughly one tab row height */
               /* content scrolls */
}

/* Footer pinned at bottom, above body scroll */
#drawer .drawer-footer {
  flex: 0 0 auto;
  position: sticky;              /* stays visible at the bottom of the drawer viewport */
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 6px 8px;
  z-index: 1;                    /* sit above body content */
}

/* Tabs look better as bottom tabs: swap the border to the top */
.drawer-tabs {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin: 0;                     /* no extra margin when in footer */
  flex-wrap: wrap;
  border-top: 1px solid transparent; /* optional: keep structure */
  border-bottom: none;           /* remove bottom border (it’s a footer) */
}

.drawer-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-top: none;              /* bottom-tab visual */
  border-top-right-radius: 0;
  background: #f9fafb;
  cursor: pointer; user-select: none;
}

.drawer-tab.active {
  background: #fff;
  font-weight: 600;
}

.drawer-tab .x,
.drawer-tab .close {
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; opacity: .7;
}

.topbar #tabsBtn { margin-left: 6px; }

/* If you had space reserved for .topbar, remove it */
.app { padding-top: 0; }

/* Chat-scoped header */
.chat-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:#fff; /* or your dark panel color */
  position:sticky; top:0; z-index:2; /* optional stickiness */
}
.chat-header .brand{ display:flex; align-items:center; gap:10px; }
.chat-header .brand-logo{ height:20px; width:auto; }
.chat-header .spacer{ flex:1; }

:root{
  /* Add sane drawer limits you can tweak */
  --drawer-min: 320px;
  --drawer-max: 960px;
}

/* Make #drawer sizing friendlier for manual width */
#drawer {
  position: relative; /* already present but keep */
}

/* When open, default to a nice width; allow inline px to override */
#drawer.open {
  /* Let JS set width in px; provide a CSS fallback using clamp */
  flex: 0 0 auto;
  width: clamp(var(--drawer-min), 50vw, var(--drawer-max));
  max-width: none;            /* remove the old fixed cap */
  border-left: 1px solid var(--border);
  z-index: 3;
}

/* Turn off the old tight max-width if present */
#drawer.open { max-width: none !important; }

/* Resizer handle (hits the left edge of the drawer) */
.drawer-resizer {
  position: absolute;
  top: 0;
  left: -4px;            /* overlap slightly into the chat area for easier grab */
  width: 8px;            /* hit area */
  height: 100%;
  cursor: col-resize;
  z-index: 4;
  background: transparent;
}

/* Optional: subtle visual when hovering the edge */
.drawer-resizer:hover {
  background: linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0));
}

/* While dragging, kill transitions so it feels snappy */
#drawer.resizing {
  transition: none !important;
}

/* Mobile: cap to full width and hide resizer if the viewport is tiny */
@media (max-width: 640px) {
  #drawer.open {
    width: 100vw !important;
  }
  .drawer-resizer { display: none; }
}