/* Use the same search component in every app surface. */
body .app-search-field .app-search-input,
body .modal[data-size] .app-search-field .app-search-input { color:#edf3f9 !important; }
.home-search-wrap.app-search-field { flex:1 1 240px; }
@container content-pane (max-width:620px) { .home-search-wrap.app-search-field { flex:0 0 auto; } .home-panel-head { flex-direction:column; align-items:stretch; } }
.html-hub-search-field { width:240px; max-width:100%; flex:0 1 240px; }
.emoji-search-wrap.app-search-field { margin:10px 12px; }
body .modal[data-size="html-hub"] .html-hub-search-field .app-search-input { width:100%; }
@media (max-width:600px) { .html-hub-search-field { width:100%; flex:1 1 160px; } }

/* Match Settings: navigation sits inside the body and search follows the title. */
body .modal[data-size="html-hub"] .html-hub-titlebar {
  display:flex; justify-content:flex-start; align-items:center; gap:14px !important;
}
body .modal[data-size="html-hub"] .html-hub-title-stack { flex:0 0 auto; }
body .modal[data-size="html-hub"] .html-hub-title-text { font-size:24px; font-weight:750; }
body .modal[data-size="html-hub"] .html-hub-title-sub { display:none; }
body .modal[data-size="html-hub"] .html-hub-layout { grid-template-columns:202px minmax(0,1fr) !important; }
body .modal[data-size="html-hub"] .html-hub-sidebar {
  display:flex; flex-direction:column; align-items:stretch; gap:3px;
  padding:22px 0 22px 24px !important; border-right:0 !important; background:transparent !important;
}
body .modal[data-size="html-hub"] .html-hub-nav-item {
  flex:0 0 auto; min-height:40px !important; padding:9px 12px;
  border:0 !important; border-radius:8px !important; background:transparent;
  color:#91a6bd; font-weight:650; box-shadow:none; transition:background 100ms ease,color 100ms ease;
}
body .modal[data-size="html-hub"] .html-hub-nav-item:hover { background:#1c2938 !important; color:#ebf3fc; }
body .modal[data-size="html-hub"] .html-hub-nav-item.is-active { background:var(--ui-panel-2,#263747) !important; color:#edf5ff; }
body .modal[data-size="html-hub"] .html-hub-nav-item:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
body .modal[data-size="html-hub"] .html-hub-content { padding:22px 24px !important; }
@media(max-width:820px) {
  body .modal[data-size="html-hub"] .html-hub-layout { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto minmax(0,1fr); }
  body .modal[data-size="html-hub"] .html-hub-sidebar { flex-direction:row; overflow-x:auto; padding:10px 14px !important; }
  body .modal[data-size="html-hub"] .html-hub-nav-item { width:auto; white-space:nowrap; }
  body .modal[data-size="html-hub"] .html-hub-content { padding:14px !important; }
  body .modal[data-size="html-hub"] .html-hub-title-text { font-size:19px; }
  body .modal[data-size="html-hub"] .html-hub-titlebar { flex-wrap:wrap; gap:9px !important; }
  body .modal[data-size="html-hub"] .html-hub-search-field { flex:1 1 130px; width:auto; }
}

/* Class details stay readable without expanding the timetable cells. */
.sched-class-label[role="button"] { cursor:pointer; border-radius:4px; }
.sched-class-label[role="button"]:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.schedule-classmates-floating { pointer-events:auto; max-width:calc(100vw - 16px); }
.schedule-classmates-floating .schedule-classmates-tooltip { max-width:min(360px, calc(100vw - 16px)); max-height:min(420px, 70vh); overflow:auto; white-space:normal; pointer-events:auto; }
.schedule-class-details-name { display:block; margin-bottom:10px; white-space:normal; overflow-wrap:anywhere; font-size:14px; line-height:1.4; }
.schedule-classmates-tooltip .call-viewers-row { display:flex; flex-direction:column; align-items:stretch; gap:7px; font-size:12px; }
.schedule-class-details-person { display:flex; gap:8px; align-items:center; overflow-wrap:anywhere; }
.schedule-class-details-person .call-viewer-avatar { flex:none; margin:0; }

/* The attachment editor uses the existing edge-to-edge media viewer shell. */
button.file-thumb { padding:0; border:0; color:inherit; cursor:pointer; }
button.file-thumb:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.image-editor { height:100%; min-height:0; display:flex; flex-direction:column; position:relative; }
/* Reuse the app's shared icon controls for every editor tool. */
.image-editor-toolbar { position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:6px; max-width:calc(100% - 24px); padding:7px; border:1px solid var(--ui-border-strong,rgba(145,171,201,.2)); border-radius:14px; background:var(--ui-panel,#19212b); box-shadow:0 8px 24px #0005; }
body .image-editor-toolbar .chat-icon-button[aria-pressed="true"] { background:rgba(92,151,218,.23) !important; border-color:rgba(123,178,236,.55) !important; color:#d8eaff !important; }
body .image-editor-toolbar .chat-icon-button:disabled { opacity:.4; cursor:default; transform:none !important; }
.image-editor-viewport { position:relative; flex:1; min-height:180px; overflow:hidden; touch-action:none; outline:none; }
.modal[data-image-editor="1"] .image-editor-viewport { width:100%; pointer-events:auto; }
.modal[data-image-editor="1"] .image-editor-toolbar { pointer-events:auto; }
.image-editor-canvas { position:absolute; left:50%; top:50%; transform-origin:center; box-shadow:0 10px 45px #0006; touch-action:none; }
.image-editor-viewport[data-tool="pan"] { cursor:grab; }
.image-editor-viewport:not([data-tool="pan"]) { cursor:crosshair; }
/* Announce progress/errors without an instructional bubble over the image. */
.image-editor-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#btn-image-editor-save:disabled { opacity:.5; }
#btn-image-editor-save svg { width:20px; height:20px; flex:none; }
@media (max-width:720px) { .modal[data-image-editor="1"] .image-editor-toolbar { top:max(64px,calc(env(safe-area-inset-top) + 64px)); } }
@media (max-width:359px) { .image-editor-toolbar { gap:3px; padding:5px; } }

/* Annotation options use the media viewer's controls and remain outside the canvas. */
.image-editor-options { position:absolute; z-index:4; top:68px; right:12px; width:240px; box-sizing:border-box; padding:12px; border:1px solid var(--ui-border-strong,rgba(145,171,201,.22)); border-radius:14px; background:var(--ui-panel,#19212b); color:#dbe6f2; box-shadow:0 12px 32px #0005; pointer-events:none; opacity:0; transform:translateY(-6px); transition:opacity 140ms ease,transform 140ms ease; max-height:calc(100dvh - 88px); overflow:auto; scrollbar-width:thin; overscroll-behavior:contain; }
.image-editor-options.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.image-editor-options[hidden],.image-editor-options [hidden] { display:none !important; }
.image-editor-options-title { margin-bottom:10px; font-size:13px; font-weight:700; line-height:18px; }
.image-editor-color-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.image-editor-options[data-tool="pen"] .image-editor-color-fields { grid-template-columns:1fr; }
.image-editor-color-field { min-width:0; display:grid; gap:5px; }
.image-editor-color-field>span,.image-editor-size-row>span:first-child,.image-editor-hex-row>span { color:#9eafc2; font-size:11px; line-height:15px; }
.image-editor-color-button { appearance:none; display:flex; align-items:center; gap:6px; width:100%; min-width:0; height:32px; padding:0 7px; background:#222e3b; color:#dce8f6; border:1px solid #8097af3d; border-radius:8px; font:inherit; cursor:pointer; touch-action:manipulation; transition:background 140ms,border-color 140ms; }
.image-editor-color-button:hover,.image-editor-color-button[aria-expanded="true"] { background:#2a3a4c; border-color:#83aedb91; }
.image-editor-color-chip { width:14px; height:14px; border-radius:4px; border:1px solid #cad7e55c; flex:0 0 14px; }
.image-editor-color-value { font:10px ui-monospace,Consolas,monospace; letter-spacing:-.3px; }
.image-editor-color-button svg { width:12px; height:12px; margin-left:auto; flex:none; }
.image-editor-size-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.image-editor-size-field { display:flex; align-items:center; width:77px; gap:3px; padding:0 8px; height:30px; border:1px solid #8097af3d; border-radius:8px; background:#111b25; }
.image-editor-size-field input { appearance:none; width:100%; min-width:0; border:0; padding:0; outline:none; background:transparent; color:#e5edf6; font-family:inherit; font-size:12px; line-height:20px; text-align:right; }
.image-editor-size-field>span { font-size:11px; color:#9eafc2; }
.image-editor-size-field:focus-within { border-color:#8bb9ed; box-shadow:0 0 0 2px #77a8df25; }
.image-editor-color-picker { margin-top:12px; padding-top:11px; border-top:1px solid #8097af30; }
.image-editor-palette { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; margin-bottom:10px; }
.image-editor-palette button { appearance:none; display:block; height:24px; min-width:0; padding:0; border:2px solid transparent; border-radius:6px; background:var(--swatch); box-shadow:inset 0 0 0 1px #c7d6e34d; cursor:pointer; touch-action:manipulation; }
.image-editor-palette button[aria-pressed="true"] { border-color:#d8eaff; box-shadow:0 0 0 1px #718aa6; }
.image-editor-color-spectrum { position:relative; width:100%; height:108px; border-radius:8px; border:1px solid #9eafc23d; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue,#f00); touch-action:none; cursor:crosshair; box-sizing:border-box; }
.image-editor-spectrum-cursor { position:absolute; width:12px; height:12px; box-sizing:border-box; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #000b; transform:translate(-50%,-50%); pointer-events:none; }
.image-editor-options input.image-editor-color-hue { appearance:none; -webkit-appearance:none; display:block; width:100%; height:26px; margin:6px 0 8px; padding:0; border:0; background:transparent; cursor:pointer; touch-action:pan-y; }
.image-editor-options input.image-editor-color-hue::-webkit-slider-runnable-track { height:10px; border-radius:6px; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.image-editor-options input.image-editor-color-hue::-moz-range-track { height:10px; border-radius:6px; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.image-editor-options input.image-editor-color-hue::-webkit-slider-thumb { appearance:none; width:17px; height:17px; margin-top:-3.5px; border:2px solid #edf4fc; border-radius:50%; background:#263647; box-shadow:0 0 0 1px #0007; }
.image-editor-options input.image-editor-color-hue::-moz-range-thumb { width:13px; height:13px; border:2px solid #edf4fc; border-radius:50%; background:#263647; box-shadow:0 0 0 1px #0007; }
.image-editor-hex-row { display:flex; align-items:center; gap:10px; }
.image-editor-hex-input { appearance:none; min-width:0; width:100%; height:30px; box-sizing:border-box; padding:4px 8px; border:1px solid #8097af3d; border-radius:8px; outline:none; background:#111b25; color:#e5edf6; font:12px ui-monospace,Consolas,monospace; text-transform:uppercase; }
.image-editor-options :is(button,[data-color-spectrum],input):focus-visible { outline:2px solid #8bb9ed; outline-offset:2px; }
.image-editor-options input[aria-invalid="true"] { outline-color:#f58b91; border-color:#f58b91; }
.image-editor-options-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.modal[data-image-editor="1"] .image-editor-text-entry { position:absolute; z-index:2; pointer-events:auto; appearance:none; margin:0; padding:0; min-width:0; min-height:0; box-sizing:content-box; resize:none; overflow:hidden; white-space:pre; overflow-wrap:normal; word-break:normal; border:1px dashed #b6cfe5a6; border-radius:2px; outline:1px solid #101b2855; background:#0f18201a; caret-color:#fff; text-align:left; transform-origin:left top; }
@media (max-width:720px) {
  .modal[data-image-editor="1"] .image-editor-toolbar { gap:4px; padding:6px; }
  .image-editor-options { top:max(128px,calc(env(safe-area-inset-top) + 128px)); right:10px; width:210px; padding:10px; max-height:calc(100dvh - max(148px,calc(env(safe-area-inset-top) + 148px))); border-radius:12px; }
  .image-editor-options-title { margin-bottom:7px; }
  .image-editor-color-fields { gap:6px; }
  .image-editor-color-button { gap:4px; padding:0 5px; }
  .image-editor-color-value { font-size:9px; }
  .image-editor-color-chip { width:12px; height:12px; flex-basis:12px; }
  .image-editor-color-picker { margin-top:10px; padding-top:9px; }
  .image-editor-color-spectrum { height:90px; }
}
@media (max-width:359px) {
  .modal[data-image-editor="1"] .image-editor-toolbar { gap:3px; padding:5px; }
  body .modal[data-image-editor="1"] .image-editor-toolbar .chat-icon-button { width:32px !important; min-width:32px !important; max-width:32px !important; flex-basis:32px !important; height:34px !important; min-height:34px !important; max-height:34px !important; border-radius:9px !important; }
  body .modal[data-image-editor="1"] .image-editor-toolbar .chat-icon-button svg { width:18px !important; height:18px !important; }
  .image-editor-options { width:200px; }
}
@media (prefers-reduced-motion:reduce) {
  .image-editor-options,.image-editor-color-button { transition:none; }
}

.image-editor-options input.image-editor-color-hue::-moz-range-progress { background:transparent; border:0; box-shadow:none; }

.image-editor-select-hint { margin:0; color:#a9b9cb; font-size:12px; line-height:1.5; }
.image-editor-edit-text { margin-top:10px; }
.image-editor-viewport[data-tool="select"] { cursor:default; }
@media (max-width:720px) {
  .modal[data-image-editor="1"] .image-editor-toolbar { gap:3px; }
  body .modal[data-image-editor="1"] .image-editor-toolbar .chat-icon-button { width:34px !important; min-width:34px !important; max-width:34px !important; flex-basis:34px !important; height:36px !important; min-height:36px !important; }
}
@media (max-width:359px) {
  .modal[data-image-editor="1"] .image-editor-toolbar { gap:2px; }
  body .modal[data-image-editor="1"] .image-editor-toolbar .chat-icon-button { width:29px !important; min-width:29px !important; max-width:29px !important; flex-basis:29px !important; height:34px !important; min-height:34px !important; }
}