/* ===========================
   YuiOS - OS UI Styles
   ใƒปใƒE‚นใ‚ฏใƒˆใƒƒใƒ—ใEๅฃ็ดE   ใƒปใ‚ขใ‚คใ‚ณใƒณใฏ็ธฆ1ๅˆE   ใƒปใ‚ฆใ‚ฃใƒณใƒ‰ใ‚ฆใฏไธ้€ๆEEˆ้€้Žใ—ใชใEผE   =========================== */

   html, body {
    height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
  }
  
  #desktop {
    position: fixed; inset: 0;
    background: var(--wallpaper);
    overflow: hidden;
  }
  
  .glass { backdrop-filter: blur(10px) saturate(120%); background: var(--glass); }
  .elev-1 { box-shadow: var(--shadow-1); }
  .elev-2 { box-shadow: var(--shadow-2); }
  .elev-3 { box-shadow: var(--shadow-3); }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Boot โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  #boot-screen {
    position: fixed; inset: 0; display: grid; place-items: center; z-index: 9999;
    background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.7));
    transition: opacity var(--dur-slow);
  }
  #boot-screen.hidden { opacity: 0; pointer-events: none; }
  .boot-card { width: 320px; padding: 24px; border-radius: 16px; background: var(--card); color: var(--fg); }
  .boot-card img { width: 40px; height: 40px; margin-bottom: 8px; }
  .boot-card .progress { height: 6px; background: rgba(127,127,127,.25); border-radius: 999px; overflow: hidden; }
  .boot-card .progress span { display:block; width:0%; height:100%; background: var(--accent-500); animation: boot 1800ms ease-in-out infinite; }
  @keyframes boot { 0%{width:10%} 50%{width:70%} 100%{width:20%} }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Taskbar โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  #taskbar {
    position: fixed; left: 0; right: 0; bottom: 0; height: 48px;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px;
    border-top: 1px solid var(--border);
  }
  #start-button {
    height: 36px; min-width: 44px; display:flex; align-items:center; gap:8px; padding: 6px 10px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev);
  }
  #start-button img { width: 18px; height: 18px; }
  #start-button:focus-visible { outline-offset: 3px; }
  
  #task-buttons { display: flex; gap: 6px; align-items: center; overflow-x:auto; scrollbar-width: thin; }
  #task-buttons button {
    min-width: 100px; height: 36px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-elev); color: var(--fg); display: flex; align-items: center; gap: 8px;
  }
  #task-buttons button.active {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-500) 30%, transparent);
  }
  #task-buttons img { width: 16px; height: 16px; }
  #tray { display:flex; align-items:center; gap:12px; }
  #clock { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Start menu โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  #start-menu {
    position: fixed; left: 8px; bottom: 56px; width: 320px;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  }
  #start-menu[hidden]{ display:none; }
  #start-menu header { display:flex; gap:12px; align-items:center; padding: 12px; border-bottom: 1px solid var(--border); }
  #start-menu header img { width: 28px; height: 28px; }
  #start-menu nav { display:grid; gap:4px; padding: 8px; }
  #start-menu nav button {
    text-align:left; display:flex; align-items:center; gap:10px; padding: 10px; border-radius: 10px;
    border: 1px solid transparent; background: transparent; min-height: 44px;
  }
  #start-menu nav button:hover {
    background: color-mix(in srgb, var(--accent-500) 12%, transparent);
    border-color: var(--border);
  }
  #start-menu nav img { width: 18px; height: 18px; }
  #start-menu footer { padding: 8px; border-top: 1px solid var(--border); display:flex; justify-content:flex-end; }
  .link { background: none; border:none; color: var(--accent-500); cursor: pointer; }
  .tiny { font-size: .875rem; }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Desktop iconsEˆ็ธฆไธฆใณEEโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  #desktop-icons {
    list-style: none;
    margin: 12px;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px 16px;
    align-content: start;
    justify-content: start;
    height: calc(100vh - 72px);
    max-height: calc(100vh - 72px);
    overflow: hidden;
  }
  .desktop-icon {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding: 10px 6px; border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elev) 30%, transparent);
    border: 1px solid transparent; user-select: none; cursor: default;
    min-height: 96px; width: 124px;             /* ๅนE›บๅฎšใงไธฆใณๅฎ‰ๅฎE*/
  }
  .desktop-icon[tabindex="0"] { cursor: pointer; }
  .desktop-icon:focus-visible {
    border-color: var(--accent-600);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-400) 35%, transparent);
  }
  .desktop-icon img { width: 36px; height: 36px; }
  .desktop-icon span { text-align:center; font-size: .875rem; line-height: 1.2; }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ WindowsEˆไธ้€ๆEๅŒ–๏ผEโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  #window-root { position: fixed; inset: 0; pointer-events:none; }
  .window {
    position: absolute; pointer-events:auto;
    background: var(--bg-elev);            /* ไธ้€ๆEใชใƒ™ใEใ‚น */
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    min-width: 260px; min-height: 160px; box-shadow: var(--shadow-2);
    opacity: 1;                             /* ๅฟตใฎใŸใ‚ๆ˜Ž็คบ */
  }
  .window .content {
    padding: 10px; height: calc(100% - 40px); overflow: auto;
    background: var(--bg-elev);            /* ๅ†Eฎน้ ˜ๅŸŸใ‚‚ไธ้€ๆE */
    opacity: 1;
  }
  .window.maximized {
    inset: 8px 8px 56px 8px !important; width: auto !important; height: auto !important; transform: none !important;
  }
  
  /* ใ‚ฟใ‚คใƒˆใƒซใƒใEEšไธ้€ๆEใƒ™ใEใ‚น + ใ”ใๆŽงใˆใ‚ใช้™ฐๅฝฑEˆ้€ๆEใฏไฝฟใ‚ใชใEผE*/
  .titlebar {
    display:flex; align-items:center; justify-content:space-between; gap:6px; padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  
    background-color: var(--bg-elev); /* ้€้Žใ—ใชใEEใƒผใ‚น */
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-elev) 92%, var(--bg) 8%),
      var(--bg-elev)
    );
    background-blend-mode: normal;
  }
  .titlebar .left { display:flex; align-items:center; gap:8px; }
  .titlebar img { width:16px; height:16px; }
  .titlebar .title { font-weight:600; }
  
  .win-controls { display:flex; gap:6px; }
  .win-controls button {
    width: 36px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg);
  }
  .win-controls button:hover { background: color-mix(in srgb, var(--accent-500) 10%, var(--bg)); }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Cards (portfolio/books) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  .grid {
    display:grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  }
  .card {
    background: var(--card); border:1px solid var(--border); border-radius: 10px; overflow:hidden;
    display:flex; flex-direction:column; transition: transform var(--dur-med);
  }
  .card:hover { transform: translateY(-2px); }
  .card .thumb { aspect-ratio: 1/1; background: linear-gradient(180deg, rgba(127,127,127,.15), rgba(127,127,127,.05)); }
  .card .body { padding: 10px; display:grid; gap:8px; }
  .badges { display:flex; gap:6px; flex-wrap:wrap; }
  .badge { font-size: .75rem; padding: 4px 8px; border-radius: 999px; border:1px solid var(--border); background: color-mix(in srgb, var(--accent-500) 8%, transparent); }
  .meta { font-size:.8rem; color: var(--muted); }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Forms โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  .input, .select, .textarea {
    width:100%; padding: 10px 12px; border-radius: 10px; border:1px solid var(--border); background: var(--bg);
  }
  .toolbar { display:flex; gap:8px; align-items:center; flex-wrap: wrap; margin-bottom: 10px; }
  .button, .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 10px 12px; min-height: 44px; border-radius: 10px; border:1px solid var(--border); background: var(--bg-elev); cursor: pointer;
  }
  .button.primary { background: var(--accent-500); border-color: var(--accent-600); color: white; }
  .button.ghost { background: transparent; }
  .button:disabled { opacity: .6; cursor: not-allowed; }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Notepad status โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  .status { font-size: .8rem; color: var(--muted); }
  .counter-bar { text-align: right; margin-top: 8px; padding: 4px 0; }
  .counter { font-size: .8rem; color: var(--muted); }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Message bubbles โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  .message-bubble {
    display: inline-block;
    width: fit-content;
    max-width: 80%;
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
  }
  .message-bubble.user {
    background: var(--accent-500);
    color: white;
    float: right;
    clear: both;
    text-align: right;
  }
  .message-bubble.bot {
    background: var(--bg-elev);
    color: var(--fg);
    border: 1px solid var(--border);
    clear: both;
    margin-top: 12px;
  }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Mobile adjustments โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  @media (max-width: 768px) {
    #taskbar { height: 56px; }
    /* Mobile: shorter viewport still wraps icons into columns */
    #desktop-icons {
      height: calc(100vh - 84px);
      max-height: calc(100vh - 84px);
    }
    .window { border-radius: 0; }
    .window.max-mobile { inset: 0 0 56px 0 !important; width:auto !important; height:auto !important; border-radius: 0; }
  }
  
  /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Utility โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
  .hidden { display:none !important; }