/* Personal Shamela Cloud — Chat SPA */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f8f9fa;--surface:#fff;--border:#dee2e6;
  --primary:#1a73e8;--primary-hover:#1557b0;
  --text:#212529;--text-muted:#6c757d;
  --radius:8px;--shadow:0 2px 8px rgba(0,0,0,0.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Arabic",sans-serif;
}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6}
#app{display:flex;flex-direction:column;height:100%;max-width:900px;margin:0 auto;padding:0 16px}
#header{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
#header h1{font-size:1.1rem;font-weight:600}
#header-actions{display:flex;gap:8px}
#header-actions button{background:none;border:none;font-size:1.3rem;cursor:pointer;padding:4px 8px;border-radius:var(--radius)}
#header-actions button:hover{background:var(--border)}
#chat-area{flex:1;overflow-y:auto;padding:16px 0;display:flex;flex-direction:column;gap:12px}
#messages{display:flex;flex-direction:column;gap:12px;flex:1}
.msg{padding:12px 16px;border-radius:var(--radius);max-width:85%;overflow-wrap:anywhere}
.msg-user{align-self:flex-end;background:var(--primary);color:#fff;white-space:pre-wrap}
.msg-assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);max-width:90%;line-height:1.72}
.msg-error{align-self:center;background:#fce4ec;color:#c62828;border:1px solid #ef9a9a;text-align:left;max-width:95%;white-space:pre-wrap}
.msg-assistant>*:first-child{margin-top:0}
.msg-assistant>*:last-child{margin-bottom:0}
.msg-assistant p{margin:0 0 .8rem}
.msg-assistant h1,.msg-assistant h2,.msg-assistant h3,.msg-assistant h4{line-height:1.3;margin:1.15rem 0 .55rem;color:#183153}
.msg-assistant h1{font-size:1.35rem;border-bottom:1px solid var(--border);padding-bottom:.4rem}
.msg-assistant h2{font-size:1.2rem;border-bottom:1px solid #edf0f2;padding-bottom:.3rem}
.msg-assistant h3{font-size:1.08rem}.msg-assistant h4{font-size:1rem}
.msg-assistant ul,.msg-assistant ol{margin:.3rem 0 .9rem;padding-inline-start:1.55rem}
.msg-assistant li{margin:.22rem 0;padding-inline-start:.15rem}
.msg-assistant li::marker{color:var(--primary);font-weight:600}
.msg-assistant blockquote{margin:.7rem 0 1rem;padding:.55rem .9rem;border-inline-start:4px solid #90caf9;background:#f5f9ff;color:#40566f;border-radius:0 6px 6px 0}
.msg-assistant blockquote p{margin-bottom:.35rem}
.msg-assistant :not(pre)>code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.88em;background:#eef2f6;color:#b42318;padding:.12rem .35rem;border-radius:4px;white-space:break-spaces}
.md-code-block{position:relative;margin:.75rem 0 1rem;padding:1rem;overflow-x:auto;background:#172033;color:#e6edf3;border:1px solid #26334d;border-radius:7px;white-space:pre;line-height:1.55;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.md-code-block[data-language]::before{content:attr(data-language);display:block;margin:-.55rem 0 .55rem;color:#91a4c2;font:600 .7rem var(--font);text-transform:uppercase;letter-spacing:.05em}
.md-code-block code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.84rem;color:inherit;background:none;padding:0}
.md-table-wrap{max-width:100%;overflow-x:auto;margin:.75rem 0 1rem;border:1px solid var(--border);border-radius:7px}
.msg-assistant table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
.msg-assistant th,.msg-assistant td{padding:.55rem .7rem;border-bottom:1px solid var(--border);text-align:start;vertical-align:top}
.msg-assistant th{background:#f1f5f9;color:#344054;font-weight:650;white-space:nowrap}
.msg-assistant tbody tr:last-child td{border-bottom:0}.msg-assistant tbody tr:nth-child(even){background:#fafbfc}
.msg-assistant .md-align-center{text-align:center}.msg-assistant .md-align-end{text-align:end}
.msg-assistant a{color:#0b63ce;text-decoration-thickness:1px;text-underline-offset:2px}.msg-assistant a:hover{text-decoration-thickness:2px}
.msg-assistant hr{border:0;border-top:1px solid var(--border);margin:1rem 0}
.msg-assistant strong{font-weight:700;color:#172b4d}.msg-assistant del{color:var(--text-muted)}
#tool-activity{padding:8px 12px;background:#e3f2fd;border-radius:var(--radius);font-size:0.85rem;color:#1565c0;text-align:left}
#tool-activity.hidden{display:none}
#input-area{padding:12px 0;border-top:1px solid var(--border)}
#chat-form{display:flex;gap:8px;align-items:flex-end}
#user-input{flex:1;resize:vertical;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font);font-size:0.95rem;min-height:44px;max-height:200px}
#user-input:focus{outline:none;border-color:var(--primary)}
#form-actions{display:flex;flex-direction:column;gap:4px}
#btn-send,#btn-stop{padding:10px 20px;border:none;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:0.9rem;font-weight:500}
#btn-send{background:var(--primary);color:#fff}
#btn-send:hover{background:var(--primary-hover)}
#btn-send:disabled{opacity:0.5;cursor:not-allowed}
#btn-stop{background:#e53935;color:#fff}
#privacy-notice{font-size:0.75rem;color:var(--text-muted);text-align:center;margin-top:8px}
.hidden{display:none!important}

/* Dialog */
dialog{border:none;border-radius:var(--radius);padding:24px;max-width:480px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.15)}
dialog::backdrop{background:rgba(0,0,0,0.4)}
dialog h2{margin-bottom:16px;font-size:1.1rem}
dialog fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:12px}
dialog legend{font-weight:600;font-size:0.9rem;padding:0 6px}
dialog label{display:block;font-size:0.85rem;margin-top:8px;color:var(--text-muted)}
dialog input,dialog select{display:block;width:100%;padding:8px 10px;margin-top:4px;border:1px solid var(--border);border-radius:4px;font-family:var(--font);font-size:0.9rem}
dialog input:focus,dialog select:focus{outline:none;border-color:var(--primary)}
#settings-actions{display:flex;gap:8px;margin-top:16px}
#settings-actions button{padding:8px 16px;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:0.9rem;border:1px solid var(--border)}
#btn-connect{background:var(--primary);color:#fff;border-color:var(--primary)}
#btn-cancel-settings{background:var(--surface)}
#remember-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;flex-wrap:wrap}
#remember-row label{font-size:0.85rem;display:flex;align-items:center;gap:6px;cursor:pointer}
#btn-clear-storage{font-size:0.78rem;padding:4px 10px;border:1px solid #c62828;border-radius:4px;background:#fff;color:#c62828;cursor:pointer;font-family:var(--font);white-space:nowrap}
#btn-clear-storage:hover{background:#fce4ec}
#storage-warning{font-size:0.75rem;color:#c62828;margin-top:8px;line-height:1.4;background:#fff3e0;padding:6px 8px;border-radius:4px;border:1px solid #ffe0b2}
#settings-status{font-size:0.8rem;margin-top:8px;min-height:1.2em}
.status-ok{color:#2e7d32}
.status-err{color:#c62828}

/* Responsive */
@media(max-width:600px){
  #app{padding:0 8px}
  .msg{max-width:95%}
  #user-input,dialog input,dialog select{font-size:16px}
  dialog{max-width:95%;padding:16px}
}