/*! Smartboard styles — load once in your site . */ .smartboard-embed{ --ink:#0E1116; --panel:rgba(22,26,33,.92); --panel-solid:#161A21; --panel-2:#1E232C; --edge:rgba(255,255,255,.09); --edge-2:rgba(255,255,255,.16); --txt:#E8EBEF; --txt-dim:#9aa3b0; --accent:#F4B740; --accent-ink:#211803; --blue:#5B8DEF; --danger:#F26D6D; --good:#54C28B; --r:14px; --r-sm:10px; --shadow:0 10px 34px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.24); --tap:42px; font-synthesis:none; } .smartboard-embed, .smartboard-embed *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} .smartboard-embed{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--txt); user-select:none; -webkit-user-select:none; touch-action:none; } #sb-app{position:absolute; inset:0; display:flex; flex-direction:column;} #sb-app{container-type:inline-size; container-name:sb;} /* ---------- Board ---------- */ #sb-board-wrap{position:absolute; inset:0; background:#3a4049; overflow:hidden;} #sb-canvas,#sb-overlay{position:absolute; inset:0; width:100%; height:100%; display:block;} #sb-overlay{pointer-events:none;} #sb-canvas{touch-action:none; cursor:crosshair;} /* ---------- Floating panels base ---------- */ .sb-glass{ background:var(--panel); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border:1px solid var(--edge); border-radius:var(--r); box-shadow:var(--shadow); } /* ---------- Top bar ---------- */ #sb-top{ position:absolute; top:12px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:6px; z-index:40; max-width:calc(100% - 24px); height:54px; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } #sb-top::-webkit-scrollbar{display:none;} .sb-brand{display:flex;align-items:center;gap:9px;padding:0 6px 0 6px;color:var(--txt);} .sb-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#E89C1F); display:grid;place-items:center;color:var(--accent-ink);flex:none;box-shadow:0 2px 8px rgba(244,183,64,.35);} .sb-brand b{font-size:14px;letter-spacing:.2px;font-weight:650;} .sb-brand span{font-size:10.5px;color:var(--txt-dim);letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:-1px;} .sb-sep{width:1px;height:28px;background:var(--edge);margin:0 2px;flex:none;} .sb-btn{ height:var(--tap); min-width:var(--tap); padding:0 10px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--txt); display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; font-size:13px; font-weight:550; transition:background .14s, color .14s, transform .06s; } .sb-btn:hover{background:rgba(255,255,255,.08);} .sb-btn:active{transform:translateY(1px);} .sb-btn svg{width:19px;height:19px;flex:none;} .sb-btn.lbl{font-variant-numeric:tabular-nums;} .sb-btn[disabled]{opacity:.35;pointer-events:none;} /* Language mode buttons in top bar */ .sb-lang-mode-btn{ font-family:'Noto Sans Devanagari','Segoe UI',Arial,sans-serif; border-radius:5px; border:1.5px solid rgba(99,102,241,.35); background:rgba(99,102,241,.08); color:#a5b4fc; transition:background .15s,color .15s,border-color .15s; } .sb-lang-mode-btn:hover{background:rgba(99,102,241,.18);color:#c7d2fe;border-color:rgba(99,102,241,.55);} /* Question font-size resizer (top bar) */ #sb-fontsizer{display:none;align-items:center;gap:2px;flex:none;} .sb-fsz-btn{ height:var(--tap); min-width:30px; padding:0 6px; border-radius:5px; border:1.5px solid rgba(244,183,64,.35); background:rgba(244,183,64,.08); color:var(--txt); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700; transition:background .14s,color .14s,border-color .14s; } .sb-fsz-btn:hover{background:rgba(244,183,64,.2);border-color:rgba(244,183,64,.6);} .sb-fsz-btn:active{transform:translateY(1px);} .sb-fsz-btn[disabled]{opacity:.35;pointer-events:none;} .sb-fsz-btn svg{width:16px;height:16px;flex:none;} #sb-fsz-input{ width:46px; height:var(--tap); padding:0 2px; text-align:center; font-size:12.5px; font-variant-numeric:tabular-nums; font-weight:550; color:var(--txt); background:rgba(255,255,255,.06); border:1.5px solid rgba(244,183,64,.35); border-radius:5px; -moz-appearance:textfield; } #sb-fsz-input::-webkit-outer-spin-button, #sb-fsz-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;} #sb-fsz-input:focus{outline:none; border-color:rgba(244,183,64,.75); background:rgba(255,255,255,.1);} #sb-fsz-pct{font-size:11.5px; color:var(--txt-dim); margin-right:1px; user-select:none;} #sb-pagelbl{min-width:64px;font-size:12.5px;color:var(--txt-dim);text-align:center;font-variant-numeric:tabular-nums;} /* ---------- Tool dock (bottom) ---------- */ #sb-dock{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; flex-direction:row; gap:4px; padding:7px; z-index:40; max-width:calc(100% - 24px); overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } #sb-dock::-webkit-scrollbar{display:none;} .sb-tool{ width:46px;height:46px;border:0;border-radius:12px;background:transparent;color:var(--txt); display:grid;place-items:center;cursor:pointer;position:relative;transition:background .14s,color .14s,transform .06s; } .sb-tool svg{width:22px;height:22px;} .sb-tool:hover{background:rgba(255,255,255,.08);} .sb-tool:active{transform:scale(.94);} .sb-tool.active{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 12px rgba(244,183,64,.4);} .sb-tool .tip{ position:absolute;left:50%;bottom:56px;transform:translateX(-50%) translateY(4px); background:#000;color:#fff;font-size:11.5px;font-weight:500;white-space:nowrap;padding:5px 9px;border-radius:7px; opacity:0;pointer-events:none;transition:opacity .12s, transform .12s;z-index:60; } .sb-tool .tip kbd{font-family:inherit;opacity:.55;margin-left:5px;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:0 4px;font-size:10px;} .sb-tool:hover .tip{opacity:1;transform:translateX(-50%) translateY(0);} .sb-tool .dot{position:absolute;right:7px;bottom:7px;width:7px;height:7px;border-radius:50%;} .sb-dock-sep{width:1px;height:30px;background:var(--edge);margin:0 4px;align-self:center;flex:none;} /* ---------- Properties bar (bottom, above the dock) ---------- */ #sb-props{ position:absolute; left:50%; bottom:82px; transform:translateX(-50%); display:flex; flex-direction:row; align-items:center; gap:4px; padding:7px 9px; z-index:40; max-width:calc(100% - 24px); overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } #sb-props::-webkit-scrollbar{display:none;} #sb-props > *{flex:none;} #sb-swatches{flex-direction:row;} #sb-props .sb-sep{width:1px;height:28px;margin:0 2px;} .sb-swatch{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;position:relative;transition:transform .1s;flex:none;} .sb-swatch:hover{transform:scale(1.12);} .sb-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent);} #sb-customwrap{position:relative;width:26px;height:26px;flex:none;} #sb-custom{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;} #sb-customface{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.25); background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);display:grid;place-items:center;color:#fff;pointer-events:none;} #sb-customface svg{width:13px;height:13px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));} .sb-sizes{display:flex;flex-direction:row;align-items:center;gap:2px;} .sb-size{width:34px;height:34px;border:0;background:transparent;border-radius:9px;display:grid;place-items:center;cursor:pointer;} .sb-size:hover{background:rgba(255,255,255,.08);} .sb-size.active{background:rgba(255,255,255,.14);} .sb-size i{display:block;border-radius:50%;background:currentColor;color:var(--txt);} #sb-opacity{accent-color:var(--accent);width:80px;min-width:80px;flex:none;} #sb-oplabel{flex:none;white-space:nowrap;} /* shapes flyout — opens upward above the bottom dock */ #sb-shapes-menu{position:absolute;left:0;bottom:calc(100% + 64px);display:none;flex-direction:row;gap:2px;padding:6px;z-index:50;} #sb-shapes-menu.open{display:flex;} #sb-shapes-menu .sb-tool{width:42px;height:42px;} /* ---------- AI Chatbot overlay panel ---------- */ #sb-web{ position:absolute; right:14px; top:78px; width:min(400px,calc(100% - 28px)); height:min(600px,calc(100% - 96px)); display:none; flex-direction:column; z-index:55; overflow:hidden; } #sb-web.open{display:flex;} .sb-web-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--edge);flex:none;} .sb-ai-mark{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--accent),#E89C1F);color:var(--accent-ink);box-shadow:0 2px 8px rgba(244,183,64,.35);} .sb-web-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .sb-web-title b{font-size:13px;color:var(--txt);line-height:1.2;} .sb-web-title small{font-size:10.5px;color:var(--txt-dim);line-height:1.2;display:flex;align-items:center;gap:5px;} .sb-ai-dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 0 2px rgba(84,194,139,.25);} .sb-ai-dot.off{background:var(--txt-dim);box-shadow:none;} /* provider picker chips under the header */ .sb-web-quick{display:flex;gap:6px;flex-wrap:wrap;padding:9px 10px;border-bottom:1px solid var(--edge);flex:none;} .sb-chip{font-size:11.5px;padding:6px 10px;border-radius:20px;border:1px solid var(--edge);background:rgba(255,255,255,.04); color:var(--txt);cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:6px;} .sb-chip:hover{background:rgba(255,255,255,.09);} .sb-chip.active{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600;} /* chat transcript */ #sb-web-body{flex:1;position:relative;background:rgba(0,0,0,.18);overflow:hidden;display:flex;flex-direction:column;min-height:0;} #sb-chat-log{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:12px;} .sb-msg{max-width:88%;font-size:13.2px;line-height:1.48;padding:9px 12px;border-radius:13px;white-space:pre-wrap;word-wrap:break-word;} .sb-msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px;} .sb-msg.bot{align-self:flex-start;background:var(--panel-2);color:var(--txt);border:1px solid var(--edge);border-bottom-left-radius:4px;} .sb-msg.bot.err{background:rgba(242,109,109,.12);border-color:rgba(242,109,109,.35);color:#ffd2d2;} .sb-msg.sys{align-self:center;max-width:96%;background:transparent;color:var(--txt-dim);font-size:11.5px;text-align:center;padding:4px 8px;} .sb-msg-meta{display:block;font-size:10px;opacity:.65;margin-top:5px;} .sb-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 13px;background:var(--panel-2);border:1px solid var(--edge);border-radius:13px;border-bottom-left-radius:4px;} .sb-typing i{width:6px;height:6px;border-radius:50%;background:var(--txt-dim);animation:sbtyping 1s infinite ease-in-out;} .sb-typing i:nth-child(2){animation-delay:.15s;} .sb-typing i:nth-child(3){animation-delay:.3s;} @keyframes sbtyping{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}} #sb-chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; text-align:center;padding:24px;color:var(--txt-dim);} #sb-chat-empty svg{color:var(--accent);opacity:.85;} #sb-chat-empty b{color:var(--txt);font-size:14px;} #sb-chat-empty p{font-size:12px;max-width:260px;margin:0;} /* composer */ #sb-chat-input-wrap{flex:none;border-top:1px solid var(--edge);padding:9px 10px;display:flex;gap:8px;align-items:flex-end;} #sb-chat-input{flex:1;min-width:0;max-height:90px;resize:none;border-radius:11px;border:1px solid var(--edge); background:rgba(0,0,0,.25);color:var(--txt);padding:9px 11px;font-size:13px;font-family:inherit;line-height:1.4;} #sb-chat-input:focus{outline:none;border-color:var(--accent);} #sb-chat-send{width:38px;height:38px;border-radius:10px;border:0;background:var(--accent);color:var(--accent-ink); display:grid;place-items:center;cursor:pointer;flex:none;transition:.12s;} #sb-chat-send:hover{filter:brightness(1.08);} #sb-chat-send:disabled{opacity:.45;cursor:default;} #sb-chat-hint{flex:none;padding:0 12px 8px;font-size:10.5px;color:var(--txt-dim);text-align:center;} /* ---------- AI settings modal ---------- */ #sb-ai-settings{position:absolute;inset:0;z-index:80;display:none;align-items:center;justify-content:center; background:rgba(8,10,14,.6);backdrop-filter:blur(3px);padding:16px;} #sb-ai-settings.open{display:flex;} #sb-ai-card{position:relative;width:min(440px,100%);max-height:100%;overflow-y:auto;background:var(--panel-solid); border:1px solid var(--edge-2);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;color:var(--txt);} #sb-ai-card h3{margin:0 0 4px;font-size:16px;} #sb-ai-card .sb-ai-sub{margin:0 0 16px;font-size:12.5px;color:var(--txt-dim);line-height:1.5;} .sb-ai-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;border:0;background:transparent; color:var(--txt-dim);display:grid;place-items:center;cursor:pointer;} .sb-ai-close:hover{background:rgba(255,255,255,.08);color:var(--txt);} .sb-ai-providers{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;} .sb-ai-provider-btn{flex:1;min-width:110px;padding:10px 8px;border-radius:11px;border:1px solid var(--edge); background:rgba(255,255,255,.03);color:var(--txt);cursor:pointer;text-align:center;font-size:12.5px;font-weight:600;transition:.12s;} .sb-ai-provider-btn.active{border-color:var(--accent);background:rgba(244,183,64,.12);color:var(--accent);} .sb-ai-field{margin-bottom:14px;} .sb-ai-field label{display:block;font-size:12px;color:var(--txt-dim);margin-bottom:6px;font-weight:600;} .sb-ai-field input[type=text],.sb-ai-field input[type=password]{width:100%;height:38px;border-radius:9px; border:1px solid var(--edge);background:rgba(0,0,0,.25);color:var(--txt);padding:0 11px;font-size:13px;font-family:inherit;} .sb-ai-field input:focus{outline:none;border-color:var(--accent);} .sb-ai-field .sb-ai-keyrow{display:flex;gap:8px;} .sb-ai-field .sb-ai-keyrow input{flex:1;min-width:0;} .sb-ai-eye{width:38px;height:38px;flex:none;border-radius:9px;border:1px solid var(--edge);background:rgba(255,255,255,.03); color:var(--txt-dim);display:grid;place-items:center;cursor:pointer;} .sb-ai-eye:hover{color:var(--txt);} .sb-ai-help{margin-top:6px;font-size:11px;color:var(--txt-dim);} .sb-ai-help a{color:var(--accent);text-decoration:none;} .sb-ai-help a:hover{text-decoration:underline;} .sb-ai-note{display:flex;gap:9px;background:rgba(91,141,239,.1);border:1px solid rgba(91,141,239,.3); border-radius:10px;padding:10px 11px;font-size:11.5px;color:#cfe0ff;line-height:1.5;margin-bottom:16px;} .sb-ai-note svg{flex:none;color:var(--blue);margin-top:1px;} .sb-ai-actions{display:flex;gap:9px;margin-top:6px;} .sb-ai-btn-primary{flex:1;height:42px;border-radius:10px;border:0;background:var(--accent);color:var(--accent-ink); font-weight:700;font-size:13.5px;cursor:pointer;} .sb-ai-btn-primary:hover{filter:brightness(1.06);} .sb-ai-btn-ghost{height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--edge);background:transparent; color:var(--txt-dim);font-size:13px;cursor:pointer;} .sb-ai-btn-ghost:hover{color:var(--txt);background:rgba(255,255,255,.05);} .sb-ai-status{font-size:11.5px;margin-top:10px;text-align:center;min-height:14px;} .sb-ai-status.ok{color:var(--good);} .sb-ai-status.bad{color:var(--danger);} /* dragging the AI chatbot panel */ .sb-drag{cursor:move;} /* ---------- Tool widgets (timer) ---------- */ #sb-timer{position:absolute;right:14px;bottom:14px;display:none;align-items:center;gap:10px;padding:10px 14px;z-index:42;} #sb-timer.open{display:flex;} #sb-timer .t{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:1px;} /* ---------- Screen shade ---------- */ #sb-shade{position:absolute;inset:0;background:#11141a;z-index:35;display:none;} #sb-shade.on{display:block;} #sb-shade .grip{position:absolute;left:0;right:0;height:26px;display:flex;align-items:center;justify-content:center; background:linear-gradient(#1b2029,#11141a);cursor:ns-resize;color:var(--txt-dim);font-size:11px;border-bottom:1px solid var(--edge-2);} #sb-shade .grip::after{content:"";position:absolute;width:46px;height:4px;border-radius:3px;background:var(--edge-2);bottom:7px;} /* ---------- Empty / hint ---------- */ #sb-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#9098a6; pointer-events:none;z-index:5;transition:opacity .4s;} #sb-hint h2{font-size:17px;font-weight:600;color:#aeb6c2;margin:0 0 6px;} #sb-hint p{font-size:13px;margin:0;} /* text editing box */ #sb-textedit{position:absolute;z-index:48;display:none;background:transparent;border:1px dashed var(--accent); color:var(--txt);font-family:inherit;outline:none;resize:none;overflow:hidden;padding:2px 3px;min-width:30px;line-height:1.15;} /* toast */ #sb-toast{position:absolute;left:50%;bottom:140px;transform:translateX(-50%) translateY(8px);background:#000;color:#fff; padding:9px 16px;border-radius:22px;font-size:12.5px;opacity:0;pointer-events:none;transition:.2s;z-index:80;white-space:nowrap;} #sb-toast.show{opacity:.94;transform:translateX(-50%) translateY(0);} .sb-hidden{display:none !important;} /* spinner */ #sb-load{position:absolute;inset:0;background:rgba(14,17,22,.72);display:none;align-items:center;justify-content:center; flex-direction:column;gap:14px;z-index:90;color:var(--txt);font-size:13px;} #sb-load.show{display:flex;} .sb-spin{width:34px;height:34px;border:3px solid var(--edge-2);border-top-color:var(--accent);border-radius:50%;animation:sbspin .8s linear infinite;} @keyframes sbspin{to{transform:rotate(360deg);}} /* ---------- File picker overlay ---------- */ #sb-picker{position:absolute; inset:0; z-index:260; display:none; align-items:center; justify-content:center; background:rgba(12,14,18,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:20px;} #sb-picker.open{display:flex;} #sb-picker-card{position:relative; width:min(440px,100%); background:var(--panel-solid); border:1px solid var(--edge-2); border-radius:18px; padding:24px 22px 20px; box-shadow:0 24px 60px rgba(0,0,0,.5); animation:sb-rise .26s cubic-bezier(.2,.8,.2,1) both;} #sb-picker-close{position:absolute; top:10px; right:10px; height:32px; min-width:32px; padding:0 8px;} #sb-picker-card h2{margin:0 0 16px; font-size:18px; color:#fff; font-weight:650; text-align:center;} #sb-drop{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; border:2px dashed var(--edge-2); border-radius:14px; padding:26px 18px; color:var(--txt-dim); transition:border-color .15s ease, background .15s ease;} #sb-drop.drag{border-color:var(--accent); background:rgba(244,183,64,.09); color:var(--txt);} #sb-drop svg{color:var(--accent);} .sb-drop-main{font-size:15px; color:var(--txt); font-weight:600;} .sb-drop-or{font-size:12px; opacity:.7;} #sb-picker-browse{appearance:none; -webkit-appearance:none; border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:650; color:var(--accent-ink); background:var(--accent); padding:11px 22px; border-radius:11px; box-shadow:0 8px 20px rgba(244,183,64,.28); transition:transform .12s ease;} #sb-picker-browse:hover{transform:translateY(-1px);} .sb-drop-accept{font-size:11.5px; opacity:.7; margin-top:2px;} @container sb (max-width:760px){ #sb-picker-card{padding:20px 16px 16px;} #sb-drop{padding:20px 12px;} } /* ---------- Welcome ---------- */ #sb-welcome{position:absolute; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 120% at 50% 0%, #20242c 0%, #15181d 62%, #0f1216 100%); padding:20px; text-align:center; -webkit-user-select:none; user-select:none;} #sb-welcome.hide{display:none;} #sb-welcome-card{max-width:380px; display:flex; flex-direction:column; align-items:center; animation:sb-rise .5s cubic-bezier(.2,.8,.2,1) both;} #sb-welcome-logo{width:82px; height:82px; border-radius:22px; display:flex; align-items:center; justify-content:center; color:var(--accent-ink); background:linear-gradient(160deg,#f7c860,#e6a52e); box-shadow:0 12px 34px rgba(244,183,64,.32); margin-bottom:14px;} #sb-welcome h1{margin:0; font-size:30px; letter-spacing:.4px; color:#fff; font-weight:700;} #sb-welcome p{margin:6px 0 18px; font-size:14px; color:var(--txt-dim);} #sb-start{appearance:none; -webkit-appearance:none; border:0; cursor:pointer; font:inherit; font-size:16px; font-weight:650; color:var(--accent-ink); background:var(--accent); padding:14px 30px; border-radius:13px; box-shadow:0 10px 26px rgba(244,183,64,.3); transition:transform .12s ease, box-shadow .12s ease;} #sb-start:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(244,183,64,.42);} #sb-start:active{transform:translateY(0);} #sb-welcome-hint{margin-top:16px; font-size:12px; color:#6b7280;} #sb-welcome-hint b{color:var(--txt-dim); font-weight:600;} .sb-welcome-or{margin:16px 0 10px; font-size:12px; color:#6b7280; display:flex; align-items:center; gap:10px; width:100%;} .sb-welcome-or::before,.sb-welcome-or::after{content:""; flex:1; height:1px; background:var(--edge);} #sb-welcome-drop{width:100%; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; border:2px dashed var(--edge-2); border-radius:14px; padding:18px 16px; color:var(--txt-dim); transition:border-color .15s ease, background .15s ease;} #sb-welcome-drop.drag{border-color:var(--accent); background:rgba(244,183,64,.09); color:var(--txt);} #sb-welcome-drop svg{color:var(--accent); opacity:.9;} #sb-welcome-browse{appearance:none; -webkit-appearance:none; border:1px solid var(--edge-2); cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--txt); background:var(--panel-2); padding:8px 16px; border-radius:9px; margin-top:2px; transition:border-color .12s ease, background .12s ease;} #sb-welcome-drop:hover #sb-welcome-browse, #sb-welcome-browse:hover{border-color:var(--accent); background:#262b35;} #sb-welcome-notice{width:100%; display:none; align-items:flex-start; gap:9px; text-align:left; background:rgba(242,109,109,.1); border:1px solid rgba(242,109,109,.32); border-radius:11px; padding:11px 12px; margin-top:12px; font-size:12.5px; line-height:1.5; color:#ffd6d6;} #sb-welcome-notice.show{display:flex;} #sb-welcome-notice svg{flex:none; margin-top:1px; color:#f26d6d;} #sb-welcome-notice b{color:#fff;} #sb-welcome-notice-close{flex:none; appearance:none; border:0; background:transparent; color:#ffd6d6; opacity:.7; cursor:pointer; padding:2px; margin:-2px -2px -2px 0; line-height:0;} #sb-welcome-notice-close:hover{opacity:1;} @keyframes sb-rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}} @container sb (max-width:760px){ #sb-welcome h1{font-size:25px;} #sb-welcome-logo{width:70px;height:70px;} } /* ---------- Responsive — keyed to the BOARD's own size (container queries) ---------- */ /* Narrow board: compact top bar & bottom dock (horizontal scroll is always on, see base rules above). */ @container sb (max-width:760px){ #sb-top{top:8px; height:46px; gap:1px; padding:4px; max-width:calc(100% - 12px); justify-content:flex-start;} .sb-brand{padding:0 4px 0 2px;} .sb-brand b, .sb-brand span{display:none;} .sb-btn .d-lbl{display:none;} .sb-btn{height:40px; min-width:40px; padding:0 7px;} .sb-btn svg{width:18px; height:18px;} .sb-sep{height:24px; margin:0 1px;} #sb-pagelbl{min-width:46px;} .sb-fsz-btn{min-width:26px; height:40px; padding:0 4px;} #sb-fsz-input{width:38px; height:40px; font-size:11px;} #sb-fsz-pct{font-size:10.5px;} #sb-dock{padding:5px 7px; gap:2px; max-width:calc(100% - 12px);} .sb-tool{width:42px; height:42px; flex:none;} .sb-tool svg{width:20px; height:20px;} .sb-dock-sep{height:26px; margin:0 3px;} #sb-web{top:54px; bottom:118px; left:6px; right:6px; width:auto; height:auto;} #sb-ai-card{padding:16px;} .sb-ai-providers{gap:6px;} .sb-ai-provider-btn{min-width:90px;padding:9px 6px;font-size:11.5px;} #sb-timer{right:6px;} } /* Narrow OR short board: compact the properties bar (still sitting just above the dock) so it never gets clipped or overflows on small screens. */ @container sb (max-width:760px), sb (max-height:540px){ #sb-props{bottom:74px; gap:2px; padding:5px 7px; max-width:calc(100% - 12px);} #sb-props .sb-sep{height:24px; margin:0 2px;} #sb-opacity{width:60px; min-width:60px;} .sb-tool .tip{display:none;} #sb-timer{bottom:120px;} } /* ===== Toolbar hide/show (double-tap to toggle) ===== */ #sb-top, #sb-dock, #sb-props{ transition: opacity .28s ease, transform .28s cubic-bezier(.3,.8,.3,1), visibility .28s; } /* Hidden state */ .sb-ui-hidden #sb-top{ opacity:0; transform:translateX(-50%) translateY(-14px); pointer-events:none; visibility:hidden; } .sb-ui-hidden #sb-dock{ opacity:0; transform:translateX(-50%) translateY(14px); pointer-events:none; visibility:hidden; } .sb-ui-hidden #sb-props{ opacity:0; transform:translateX(-50%) translateY(14px); pointer-events:none; visibility:hidden; } /* Double-tap nudge indicator — appears at canvas centre when toolbars are hidden */ #sb-ui-hint{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%) translateY(6px); background:rgba(0,0,0,.55); color:rgba(255,255,255,.7); font-size:11.5px; font-weight:500; padding:6px 14px; border-radius:20px; pointer-events:none; opacity:0; transition:opacity .25s, transform .25s; z-index:38; white-space:nowrap; letter-spacing:.02em; } .sb-ui-hidden #sb-ui-hint{ opacity:1; transform:translateX(-50%) translateY(0); } /* Don't animate until JS has set the class at least once */ .sb-ui-anim-ready #sb-top, .sb-ui-anim-ready #sb-dock, .sb-ui-anim-ready #sb-props{ transition: opacity .28s ease, transform .28s cubic-bezier(.3,.8,.3,1), visibility .28s; } /* ===== component host (added for embedding) ===== */ .smartboard-embed{position:relative; overflow:hidden; width:100%; min-height:320px; background:#2a2f37; border-radius:12px; -webkit-user-select:none; user-select:none; touch-action:none;} .smartboard-embed:focus, .smartboard-embed:focus-visible{outline:none;} .smartboard-embed:fullscreen{border-radius:0; width:100%; height:100%;} .smartboard-embed:-webkit-full-screen{border-radius:0; width:100%; height:100%;}