/* MorphOS Selftest — dark glassy theme, no external dependencies */
:root{
  --bg0:#070a14; --bg1:#0d1330; --bg2:#1a1440;
  --glass:rgba(18,22,44,.78); --glass-strong:rgba(14,17,36,.92);
  --stroke:rgba(140,160,255,.22); --stroke-soft:rgba(140,160,255,.12);
  --text:#e8ecff; --muted:#9aa6d8; --faint:#6b77ad;
  --accent:#7c8cff; --accent2:#b07cff; --ok:#4ade80; --warn:#fbbf24; --err:#fb7185;
  --radius:14px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font); color:var(--text); overflow:hidden;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(124,140,255,.28), transparent 60%),
    radial-gradient(900px 650px at -10% 110%, rgba(176,124,255,.22), transparent 55%),
    linear-gradient(150deg,var(--bg0),var(--bg1) 55%,var(--bg2));
}
#desktop{position:fixed; inset:0 0 44px 0; overflow:hidden}
#wallpaper-glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(500px 300px at 50% 45%, rgba(124,140,255,.10), transparent 70%)}

/* ---------- Brand & boot hint ---------- */
#desktop-brand{position:absolute; top:26px; right:32px; text-align:right; pointer-events:none; user-select:none}
.brand-name{font-size:30px; font-weight:700; letter-spacing:.4px}
.brand-name span{background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-sub{color:var(--muted); font-size:13px; margin-top:3px}
#boot-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  max-width:640px; text-align:center; color:var(--muted); font-size:13px; line-height:1.55;
  background:var(--glass); border:1px solid var(--stroke-soft); border-radius:12px; padding:10px 16px;
  backdrop-filter:blur(14px); pointer-events:none;
}
#boot-hint strong{color:var(--text)}

/* ---------- Desktop icons ---------- */
#desktop-icons{
  position:absolute; top:22px; left:18px; display:flex; flex-direction:column; flex-wrap:wrap;
  gap:6px; max-height:calc(100% - 110px); align-content:flex-start;
}
.dicon{
  width:88px; padding:10px 4px 8px; border-radius:12px; border:1px solid transparent;
  background:transparent; color:var(--text); cursor:pointer; font-family:var(--font);
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.dicon:hover{background:rgba(124,140,255,.12); border-color:var(--stroke-soft)}
.dicon .dic{font-size:30px; line-height:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.dicon .dlabel{font-size:12px; text-align:center; text-shadow:0 1px 4px rgba(0,0,0,.8); word-break:break-word}
.dicon.forged .dlabel::after{content:" ✦"; color:var(--accent2)}
.dicon .dbroken{font-size:10px; color:var(--err)}

/* ---------- Windows ---------- */
#windows{position:absolute; inset:0}
.win{
  position:absolute; min-width:320px; min-height:220px; max-width:calc(100vw - 24px);
  display:flex; flex-direction:column; border-radius:var(--radius);
  background:var(--glass); border:1px solid var(--stroke);
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
  backdrop-filter:blur(18px) saturate(1.2); overflow:hidden;
}
.win.focused{border-color:rgba(150,170,255,.45); box-shadow:0 26px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(124,140,255,.18)}
.win.minimized{display:none}
.win-head{
  display:flex; align-items:center; gap:8px; padding:9px 10px 9px 14px; cursor:grab;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom:1px solid var(--stroke-soft); user-select:none; touch-action:none;
}
.win-head:active{cursor:grabbing}
.win-head .wic{font-size:16px}
.win-head .wtitle{font-size:13.5px; font-weight:600; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.win-btns{display:flex; gap:6px}
.win-btn{
  width:26px; height:22px; border-radius:6px; border:1px solid var(--stroke-soft);
  background:rgba(255,255,255,.05); color:var(--muted); cursor:pointer; font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center; font-family:var(--font);
}
.win-btn:hover{background:rgba(124,140,255,.22); color:var(--text)}
.win-btn.close:hover{background:rgba(251,113,133,.35); color:#fff}
.win-body{flex:1; overflow:auto; padding:14px; position:relative}
.win-body.nopad{padding:0; overflow:hidden}
.win-body iframe.forged-frame{width:100%; height:100%; border:0; background:#0b0e20; display:block}

/* ---------- Taskbar ---------- */
#taskbar{
  position:fixed; left:0; right:0; bottom:0; height:44px; z-index:99999;
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:var(--glass-strong); border-top:1px solid var(--stroke);
  backdrop-filter:blur(18px);
}
#taskbar-brand{font-weight:700; font-size:13px; color:var(--accent); white-space:nowrap}
#taskbar-windows{display:flex; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none}
#taskbar-windows::-webkit-scrollbar{display:none}
.tb-btn{
  border:1px solid var(--stroke-soft); background:rgba(255,255,255,.05); color:var(--muted);
  border-radius:8px; padding:5px 10px; font-size:12.5px; cursor:pointer; white-space:nowrap; font-family:var(--font);
}
.tb-btn.active{color:var(--text); border-color:rgba(150,170,255,.5); background:rgba(124,140,255,.18)}
#taskbar-journal{font-size:11.5px; color:var(--faint); max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#taskbar-clock{font-family:var(--mono); font-size:13px; color:var(--text); white-space:nowrap}

/* ---------- Generic app UI ---------- */
h3.app-h{margin:0 0 8px; font-size:15px}
p.app-p{color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 10px}
.btn{
  border:1px solid rgba(150,170,255,.4); color:var(--text); cursor:pointer;
  background:linear-gradient(180deg, rgba(124,140,255,.35), rgba(124,140,255,.18));
  border-radius:9px; padding:8px 14px; font-size:13px; font-family:var(--font); font-weight:600;
}
.btn:hover{filter:brightness(1.15)}
.btn:disabled{opacity:.45; cursor:wait}
.btn.ghost{background:rgba(255,255,255,.05); border-color:var(--stroke-soft); font-weight:500}
.btn.danger{background:rgba(251,113,133,.18); border-color:rgba(251,113,133,.45)}
.btn.small{padding:5px 10px; font-size:12px}
input[type=text],input[type=password],input[type=url],textarea,select{
  width:100%; background:rgba(5,7,18,.65); border:1px solid var(--stroke-soft); color:var(--text);
  border-radius:9px; padding:9px 11px; font-size:13.5px; font-family:var(--font); outline:none;
}
textarea{resize:vertical; line-height:1.5}
input:focus,textarea:focus{border-color:var(--accent)}
label.fld{display:block; font-size:12px; color:var(--muted); margin:12px 0 5px; font-weight:600; letter-spacing:.3px}
.hint{font-size:12px; color:var(--faint); line-height:1.5; margin-top:6px}
.saved-flash{color:var(--ok); font-size:12.5px; margin-left:10px}

/* Chat */
.chat-wrap{display:flex; flex-direction:column; height:100%; gap:10px}
.chat-log{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px}
.msg{max-width:88%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word}
.msg.user{align-self:flex-end; background:linear-gradient(180deg, rgba(124,140,255,.4), rgba(124,140,255,.25)); border:1px solid rgba(150,170,255,.35)}
.msg.assistant{align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--stroke-soft)}
.msg.tool{align-self:flex-start; background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.25); color:#bbf7d0; font-family:var(--mono); font-size:12px}
.msg.error{align-self:flex-start; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3); color:#fecdd3}
.chat-row{display:flex; gap:8px}
.chat-row textarea{flex:1; min-height:42px; max-height:110px}
.chat-status{font-size:12px; color:var(--faint); min-height:15px}

/* Forge */
.forge-list{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.forge-item{display:flex; align-items:center; gap:10px; border:1px solid var(--stroke-soft); border-radius:10px; padding:8px 11px; background:rgba(255,255,255,.03)}
.forge-item .fi{font-size:20px}
.forge-item .fname{flex:1; font-size:13px; font-weight:600}
.forge-item .ferr{font-size:11.5px; color:var(--err); display:block; font-weight:400; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.forge-item .fok{font-size:11.5px; color:var(--ok); display:block; font-weight:400}

/* Journal */
.journal-list{font-family:var(--mono); font-size:12px; line-height:1.6}
.journal-list .jrow{padding:5px 8px; border-bottom:1px solid rgba(140,160,255,.07); display:flex; gap:10px}
.journal-list .jt{color:var(--faint); white-space:nowrap}
.journal-list .jl{white-space:nowrap; font-weight:700}
.journal-list .jl.info{color:var(--accent)} .journal-list .jl.ok{color:var(--ok)}
.journal-list .jl.warn{color:var(--warn)} .journal-list .jl.error{color:var(--err)}
.journal-list .jm{word-break:break-word}

/* Vision */
pre.vision-json{
  background:rgba(5,7,18,.7); border:1px solid var(--stroke-soft); border-radius:10px;
  padding:12px; font-family:var(--mono); font-size:12px; line-height:1.6; overflow:auto;
  max-height:calc(100% - 120px); white-space:pre-wrap; word-break:break-word; margin:10px 0 0;
}
.app-toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px}

@media (max-width:700px){
  /* ===== Mobile — même OS, adapté comme LazySiren : plein écran + tactile ===== */
  #desktop-brand{top:12px; right:14px} .brand-name{font-size:20px}
  .brand-tag{font-size:11px}
  #boot-hint{display:none}
  /* Accueil mobile : les icônes deviennent une grille tactile sous la marque */
  #desktop-icons{
    top:74px; left:10px; right:10px; flex-direction:row; flex-wrap:wrap;
    gap:4px; max-height:none; align-content:flex-start;
  }
  .dicon{width:76px; min-height:76px; padding:10px 2px 8px}
  .dicon .dic{font-size:32px}
  .dicon .dlabel{font-size:11.5px}
  /* Fenêtres plein écran (classe posée par openWindow sur petit écran) */
  .win{min-width:0}
  .win-mobile-full{
    inset:0 !important; width:100% !important; height:100% !important;
    max-width:100% !important; max-height:100% !important;
    border-radius:0; border-left:none; border-right:none; border-top:none;
  }
  /* Une fenêtre plein écran couvre la marque et la grille d'icônes */
  #windows{z-index:5}
  #desktop-icons{z-index:1}
  #desktop-brand{z-index:1}
  body.has-open-win #desktop-brand, body.has-open-win #desktop-icons{visibility:hidden}
  .win-head{padding:10px 12px}
  .win-btn{min-width:40px; min-height:40px; font-size:15px}
  .win-body{padding:12px}
  /* Barre des tâches compacte, cibles tactiles */
  #taskbar{gap:6px; padding:0 8px}
  #taskbar-journal{display:none}
  #taskbar-clock{font-size:11.5px}
  .tb-btn{padding:8px 10px; font-size:12px}
  /* Évite le zoom auto iOS/Android sur les champs */
  input, textarea, select{font-size:16px !important}
  .msg{max-width:94%}
  .chat-row textarea{min-height:48px}
  button{min-height:40px}
}