/* Chrome shell: title bar, QAT, ribbon, status bar, ruler, plus temporary
   boot placeholder styling. Grows into full chrome during the build. */

/* ======================= window chrome ====================== */

.titlebar {
  display: flex;
  align-items: stretch;
  height: 46px;
  background: var(--chrome-bg);
  border-bottom: 1px solid transparent;
  padding-right: 0;
  z-index: 60;
  position: relative;
}
.tb-left { display: flex; align-items: center; gap: 2px; padding-left: 8px; min-width: 0; }
.word-logo {
  width: 34px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px;
  flex: none;
}
.qat { display: flex; align-items: center; gap: 1px; }
.qat-btn {
  width: 30px; height: 30px; border-radius: 4px;
  display:flex; align-items:center; justify-content:center;
  border: none; background: transparent; color:#444; cursor: default;
  outline-offset: -2px;
}
.qat-btn:hover:not(:disabled) { background: var(--chrome-hover); }
.qat-btn:active:not(:disabled) { background: var(--chrome-active); }
.qat-btn:disabled { color: var(--disabled); opacity: .75; }
.qat-sep { width: 1px; height: 18px; background: #d6d3d0; margin: 0 5px; }

.tb-center {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  pointer-events: auto; min-width: 320px;
}
.doc-title-row { display: flex; align-items: baseline; gap: 7px; }
.doc-name {
  font-size: 12.5px; font-weight: 600; letter-spacing:.1px;
  padding: 1px 6px; border-radius: 3px; max-width: 380px;
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-name:hover { background: rgba(0,0,0,.045); }
.doc-name:focus { outline: 1.5px solid var(--accent); background:#fff; }
.autosave-chip {
  display:flex; align-items:center; gap:5px;
  font-size: 11.5px; color: var(--text-secondary);
  padding: 2px 8px; border-radius: 11px; border: 1px solid transparent;
}
.autosave-chip .switch { width: 26px; height: 12px; border-radius: 7px; background: #c8c6c4; position: relative; transition: background .15s; }
.autosave-chip.on .switch { background: var(--accent); }
.autosave-chip .knob { width: 10px;height:10px;border-radius:50%;background:#fff;position:absolute;top:1px;left:1px;transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.autosave-chip.on .knob { left: 15px; }
.save-state { font-size: 11.5px; color: var(--text-secondary); }

.tb-right { margin-left:auto; display:flex; align-items:center; }
.win-controls { display:flex; height:100%; }
.win-btn { width: 46px; height:100%; display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#555;cursor:default;}
.win-btn:hover { background: rgba(0,0,0,.05); }
.win-btn.close:hover { background: #c42b1c; color: white; }

.account-chip { display:flex; align-items:center; gap:7px; padding: 4px 9px; border-radius: 14px; font-size:12px; margin-right: 8px;}
.account-chip:hover { background: var(--chrome-hover); }
.avatar { width: 24px; height:24px; border-radius:50%; background: linear-gradient(135deg,#7b83eb,#4f6bed); color:#fff; font-size:11px; display:flex;align-items:center;justify-content:center; font-weight:600;}

/* ======================= tab strip =========================== */

.tab-strip { display:flex; align-items:flex-end; background:var(--chrome-bg); padding: 0 4px; height: 36px; position:relative; z-index:58;}
.tab-strip .app-tabs { display:flex; height:100%; }
.ribbon-tab {
  border:none;background:transparent;cursor:default;
  font: inherit;font-size:12.5px;color:#333;
  padding: 8px 13px 9px; border-radius: 4px 4px 0 0;
  position: relative; line-height: 20px;
}
.ribbon-tab:hover { background: var(--chrome-hover); }
.ribbon-tab.active {
  background: var(--title-active-tab);
  color: var(--accent-text);
  font-weight: 600;
}
.ribbon-tab.active::after {
  content:''; position:absolute; left:6px; right:6px; bottom:-1px; height:2.4px;
  background: var(--accent); border-radius: 2px;
}
.searchbox {
  margin-left: auto; margin-right: 8px;
  display:flex;align-items:center;gap:6px;
  width: 210px;height:29px;padding:0 10px;
  background:#fff;border:1px solid #d1d1d1;border-radius:16.5px;
  color:#666;font-size:12px;
}

/* ======================= ribbon body ========================= */

.ribbon-body {
  background: var(--title-active-tab);
  border-bottom: 1px solid var(--chrome-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  position: relative; z-index: 57;
}
.ribbon-panels { min-height: 92px; }
.ribbon-panel { display: flex; padding: 5px 6px 7px; gap: 0; animation: panelIn .16s ease-out; }
@keyframes panelIn { from { opacity:.35; transform: translateY(-2px);} to {opacity:1;transform:none;} }

.ribbon-group { display:flex; align-items:stretch; padding: 0 6px; position:relative; }
.ribbon-group + .ribbon-group::before {
  content:''; align-self:stretch; margin: 2px 0;
  border-left: 1px solid #e2e0de;
}
.group-stack { display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-width:0; }
.group-controls { display:flex; align-items:flex-start; gap:2px; }
.group-label {
  font-size:10.5px; color:#5f5e5c; margin-top:auto; padding-top:3px;
  white-space:nowrap; text-align:center;
}
.dialog-launcher {
  align-self: stretch; width: 12px; margin-left: 2px;
  border: none; background: transparent; border-radius: 2px; cursor: default;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px;
  color:#666;
}
.dialog-launcher:hover { background: var(--chrome-hover); }

.rb-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width: 42px; padding: 4px 6px;
  border:none;background:transparent;border-radius:4px;cursor:default;color:#333;
  font:inherit;font-size:11.5px;text-align:center;line-height:1.15;
  outline-offset:-2px;
}
.rb-btn.large { min-width: 52px; }
.rb-btn:hover:not(:disabled) { background: var(--chrome-hover); }
.rb-btn.pressed:not(:disabled), .rb-btn.toggled-on { background: var(--chrome-hover); box-shadow: inset 0 0 0 1px #d8d6d3; }
.rb-btn:disabled { color: var(--disabled); }
.rb-btn:disabled svg { opacity:.45; }
.rb-btn .btn-label { max-width: 62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.rb-row { display:flex; gap: 0; }
.rb-mini-btn {
  width: 22px; height: 23px; display:inline-flex; align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:3px;color:#444;cursor:default;
}
.rb-mini-btn:hover:not(:disabled){background:var(--chrome-hover);}
.rb-mini-btn:active:not(:disabled){background:var(--chrome-active);}
.rb-mini-btn.toggled-on { background:#dbe8f7; box-shadow: inset 0 0 0 1px #a8c4e6; }
.rb-mini-btn:disabled{color:var(--disabled);}

.split-btn { display:flex; flex-direction:column; align-items:center; min-width:46px; }
.split-main { display:flex;flex-direction:column;align-items:center;gap:2px;border:none;background:transparent;border-radius:4px 4px 0 0; padding:4px 6px 1px;cursor:default;font:inherit;font-size:11.5px;color:#333;}
.split-arrow { height: 13px; display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:0 0 4px 4px;width:100%;color:#555;cursor:default;}
.split-btn:hover > :is(.split-main,.split-arrow) { background: var(--chrome-hover); }
.split-btn.opened > :is(.split-main,.split-arrow) { background: var(--chrome-active); }
.split-btn.half-toggle .split-main.toggled-on { background:#dbe8f7; box-shadow: inset 0 0 0 1px #a8c4e6; border-radius:4px;}

.gallery-btn {
  display:flex;flex-direction:column;align-items:center;border:none;background:transparent;border-radius:4px;padding:2px 4px;min-width:70px;cursor:default;
}
.gallery-frame { border:1px solid #d8d6d3;border-radius:3px;background:#fafafa;display:flex;flex-direction:column;overflow:hidden;min-width:64px;}
.gallery-preview { height: 40px; width: 78px; background:#fff; position:relative; overflow:hidden; border-bottom:1px solid #eee;}
.gal-arrow-strip { display:flex; align-items:center; justify-content:center; height:11px; color:#777;}
.gallery-btn:hover .gallery-frame { border-color:#bbb; background:#fff; }

.font-box { display:flex; align-items:center; gap: 4px; }
.name-font-btn, .size-font-btn {
  border: 1px solid #d8d6d3; background:#fff; height: 26px; border-radius: 3px;
  display:flex; align-items:center; font: inherit; color:#333; cursor: default; padding: 0 4px 0 8px;
}
.name-font-btn { width: 138px; font-size:12px; justify-content:space-between;}
.size-font-btn { width: 54px; }
.name-font-btn:hover,.size-font-btn:hover{border-color:#aaa;background:#fbfbfb;}
.caret-dn { margin: 0 3px; color:#777; }

.sb-vertical-stack {display:flex; flex-direction:column; gap:2px;}

/* ======================= status bar ========================== */

.statusbar {
  height: 25px; background: var(--statusbar-bg);
  border-top: 1px solid var(--chrome-border);
  display:flex; align-items:center; font-size: 11.5px; color:#444;
  padding: 0 4px 0 10px; gap: 2px; z-index:56; user-select:none;
}
.sb-item { display:flex;align-items:center;gap:4px;padding:2px 7px;border-radius:3px;white-space:nowrap; }
button.sb-item { border:none;background:transparent;font:inherit;color:inherit;cursor:default;}
button.sb-item:hover { background: var(--chrome-hover); }
.sb-spacer { flex:1; }
.sb-view-btns { display:flex; align-items:center; gap:2px; border-right:1px solid #ddd8d3; padding-right:8px;margin-right:6px;height:16px;}
.sb-view-btn {width:24px;height:19px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:3px;color:#555;}
.sb-view-btn:hover{background:var(--chrome-hover);}
.sb-view-btn.on { background:#dbe5f3; color: var(--accent-deep); box-shadow: inset 0 0 0 1px #b5c9e4;}
.zoom-group { display:flex;align-items:center;gap:6px; padding: 0 6px;}
.zoom-slider { -webkit-appearance:none; width: 132px; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,20%), #d3d3d3 var(--fill,20%)); outline:none;}
.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width: 9px; height:9px; border-radius:50%;
  background:#fff; border:1px solid #999; box-shadow: 0 1px 2px rgba(0,0,0,.3); margin-top:0px;
}
.zoom-slider::-webkit-slider-thumb:hover { transform: scale(1.25); border-color:var(--accent); }
.zoom-pct { min-width: 38px; text-align:left; border-radius:3px; padding:2px 4px;}
.zoom-pct:hover{background:var(--chrome-hover);}

/* ======================= ruler =============================== */

.ruler-wrap { background: var(--title-active-tab); position: relative; overflow: hidden; border-bottom: 0 solid; }
.ruler-canvas { display:block; width:100%; height: 26px; cursor: default; }
.ruler-hidden { display:none; }

/* temp */
.boot-note { padding: 24px; font-size: 13px; color:#333; }